React Native中react-native-config多环境配置问题咨询

1. 如何读取.env.dev和.env.prod中的环境变量？ #

当前默认读取.env是因为未指定对应环境的构建标识，需分平台操作：

• iOS：启动时指定对应Scheme，执行命令：

  npx react-native run-ios --scheme dev
  # 生产环境执行
  npx react-native run-ios --scheme prod
  

  同时确认对应Scheme的Config.xcconfig文件已配置ENVFILE=.env.dev（dev环境）或ENVFILE=.env.prod（prod环境），运行脚本需正确指向该xcconfig。
• Android：先在build.gradle中配置productFlavors（dev和prod），再启动时指定构建变体：

  npx react-native run-android --variant devDebug
  # 生产环境执行
  npx react-native run-android --variant prodDebug
  

  确保每个flavor的envConfigFiles关联对应.env文件，示例配置：

  productFlavors {
      dev {
          resValue "string", "build_config_package", "你的应用包名"
          envConfigFiles = [
              debug: ".env.dev",
              release: ".env.dev"
          ]
      }
      prod {
          resValue "string", "build_config_package", "你的应用包名"
          envConfigFiles = [
              debug: ".env.prod",
              release: ".env.prod"
          ]
      }
  }
  

2. build.gradle中resValue和flavor相关代码的作用 #

• productFlavors（构建风味）：定义不同的构建变体，让Android构建系统生成对应环境的安装包。每个风味可独立配置环境变量、资源、依赖等，实现dev/prod等多环境的隔离。
• resValue：构建时动态生成Android资源文件（如strings.xml）中的变量，让Android原生代码（Java/Kotlin）能访问环境变量；同时react-native-config依赖这些原生层变量，实现JS层与原生层的环境变量打通，确保JS能读取对应环境的值。也可搭配buildConfigField生成BuildConfig类字段，作用类似，都是为了让原生层获取环境变量。

3. 修改.env后仍输出旧值，如何重新加载环境变量？ #

无需重装node_modules，按以下步骤清理缓存即可：

• iOS：
  1. 清除Xcode派生数据：rm -rf ~/Library/Developer/Xcode/DerivedData
  2. 清理Xcode项目（快捷键Cmd+Shift+K）或删除ios/build目录
  3. 重启Metro服务：npx react-native start --reset-cache
• Android：
  1. 执行gradle清理：./gradlew clean
  2. 删除android/app/build目录
  3. 重启Metro服务：npx react-native start --reset-cache
• 通用：确保关闭所有Metro进程后再重启，避免缓存残留。

4. 当前配置下的多环境构建逻辑 #

核心是构建标识与.env文件的绑定，流程如下：

1. 触发构建：根据选择的iOS Scheme或Android构建变体，构建工具定位到对应环境配置（iOS的Config.xcconfig、Android的productFlavors）。
2. 加载.env文件：react-native-config的脚本（iOS的运行脚本、Android的dotenv.gradle）根据配置读取指定的.env文件（如.env.dev或.env.prod）。
3. 变量注入原生层：将.env中的变量转换为原生平台可识别的形式——iOS写入编译参数或Info.plist，Android写入BuildConfig或resValue资源。
4. JS层读取：JS通过import Config from 'react-native-config'读取原生层传递的变量，从而拿到对应环境的配置。
5. 默认 fallback：如果未指定任何环境标识，构建工具会默认读取根目录的.env文件，这就是你之前只能读到.env内容的原因。

内容的提问来源于stack exchange，提问作者Koreahn