React Native应用如何配置Staging与Production环境API切换？

我明白你想快速切换production和staging API的需求，不用复杂的第三方工具也能搞定，下面给你几个简单可行的方案，都是贴合你想复制环境文件的思路来的：

方案1：通过npm脚本+文件复制替换（最直接无依赖） #

这个方法完全不需要额外安装包，靠脚本自动替换环境文件：

• 第一步：先创建两个独立的环境配置文件
  • envProd.js：写入production环境的API URL，比如：

    export default {
      API_URL: "https://prod-your-api-domain.com"
    };
    

  • envStaging.js：写入staging环境的API URL，比如：

    export default {
      API_URL: "https://staging-your-api-domain.com"
    };
    

  保留原来的environment.js作为项目中实际引用的文件，它会被脚本自动替换内容。
• 第二步：修改package.json里的脚本，添加切换命令

  "scripts": {
    "start:prod": "cp envProd.js environment.js && react-native start",
    "start:staging": "cp envStaging.js environment.js && react-native start",
    "android:prod": "cp envProd.js environment.js && react-native run-android",
    "android:staging": "cp envStaging.js environment.js && react-native run-android",
    "ios:prod": "cp envProd.js environment.js && react-native run-ios",
    "ios:staging": "cp envStaging.js environment.js && react-native run-ios"
  }
  

  注意：如果是Windows系统，把cp换成copy命令，比如copy envStaging.js environment.js。
• 第三步：运行对应命令切换环境
  比如要启动staging环境的Android应用，直接执行npm run android:staging即可，脚本会自动把envStaging.js的内容复制到environment.js中，项目引用的就是staging的API地址了。

方案2：使用babel插件通过环境变量控制（更灵活） #

如果不想每次替换文件，可以用环境变量动态切换：

• 第一步：安装babel插件

  npm install babel-plugin-transform-inline-environment-variables --save-dev
  

• 第二步：修改babel.config.js（或.babelrc），添加插件配置

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ['transform-inline-environment-variables', {
        include: ['API_ENV'] // 指定要注入的环境变量名
      }]
    ]
  };
  

• 第三步：修改environment.js，根据环境变量判断使用哪个API

  const API_URL = process.env.API_ENV === 'staging' 
    ? 'https://staging-your-api-domain.com' 
    : 'https://prod-your-api-domain.com';
  
  export default { API_URL };
  

• 第四步：在package.json中添加带环境变量的脚本

  "scripts": {
    "start:prod": "API_ENV=production react-native start",
    "start:staging": "API_ENV=staging react-native start",
    "android:prod": "API_ENV=production react-native run-android",
    "android:staging": "API_ENV=staging react-native run-android",
    "ios:prod": "API_ENV=production react-native run-ios",
    "ios:staging": "API_ENV=staging react-native run-ios"
  }
  

  Windows系统需要把环境变量写法改成set API_ENV=staging，比如"start:staging": "set API_ENV=staging && react-native start"。

方案3：让react-native-config生效（你试过的工具） #

如果你还是想用react-native-config，可能之前的配置有遗漏，按下面步骤来：

• 第一步：安装并链接依赖

  npm install react-native-config
  # iOS需要安装pods
  npx pod-install ios
  

• 第二步：在项目根目录创建两个.env文件
  • .env.production：写入API_URL=https://prod-your-api-domain.com
  • .env.staging：写入API_URL=https://staging-your-api-domain.com
• 第三步：修改package.json的启动脚本，指定环境文件

  "scripts": {
    "start:prod": "ENVFILE=.env.production react-native start",
    "start:staging": "ENVFILE=.env.staging react-native start",
    "android:prod": "ENVFILE=.env.production react-native run-android",
    "android:staging": "ENVFILE=.env.staging react-native run-android",
    "ios:prod": "ENVFILE=.env.production react-native run-ios",
    "ios:staging": "ENVFILE=.env.staging react-native run-ios"
  }
  

• 第四步：在environment.js中引用配置

  import Config from 'react-native-config';
  
  export default {
    API_URL: Config.API_URL
  };
  

  小贴士：如果iOS没生效，尝试重新编译pods；Android没生效的话，进入android目录执行./gradlew clean再重新运行。

不管用哪种方案，切换环境后建议执行npm start -- --reset-cache清理缓存，避免旧的配置残留。

内容的提问来源于stack exchange，提问作者fatima zahra el quortobi