React Native中react-native-config无法读取.env文件值的问题

以下是你可能遗漏的关键配置步骤，按顺序排查：

1. 配置Babel插件 #

react-native-config需要通过Babel插件在编译阶段注入环境变量，必须在babel.config.js中添加插件配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['module:react-native-config'], // 新增这一行
};

2. 检查.env文件位置与格式 #

• 确保.env文件放在项目根目录（和package.json同级），不要放在子文件夹中
• 检查文件格式：键值对不要加引号，正确写法为ENV_NAME=prod，避免写成ENV_NAME="prod"

3. iOS端Xcode配置（关键步骤） #

react-native-config在iOS端需要通过Xcode构建流程加载环境变量，操作如下：

1. 打开项目的Xcode工程（ios/[你的项目名].xcodeproj）
2. 选中项目的target，进入Build Phases标签
3. 点击左上角+号，选择New Run Script Phase
4. 将脚本内容替换为：

"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/ReactNativeConfig.xcconfig"

5. 拖动这个Run Script Phase到Dependencies阶段之后、Compile Sources阶段之前
6. 进入Build Settings标签，搜索Configurations，确保每个配置（Debug/Release）都引用了生成的ReactNativeConfig.xcconfig：点击每个配置对应的下拉框，选择该文件

4. 清理缓存并重新构建 #

缓存是导致变量不更新的常见原因，执行以下操作：

• 清除Metro缓存：npx react-native start --reset-cache
• 清除Xcode缓存：打开Xcode → 点击菜单栏Product → Clean Build Folder，或直接删除~/Library/Developer/Xcode/DerivedData目录下的项目缓存
• 先在Xcode中点击Build按钮完成项目构建，再通过npm start启动Metro

5. 检查代码中的变量读取方式 #

确保代码中正确导入并使用Config：

import Config from 'react-native-config';

// 正确读取示例
const isDev = Config.ENV_NAME === 'dev';
const testEnvString = Config.TEST_ENV_VAR;

注意：变量名要和.env中的完全一致（区分大小写）

额外排查点 #

• 如果你是从Expo迁移过来，检查是否残留了Expo的环境变量逻辑（比如使用Expo.Constants），确保完全切换到react-native-config的读取方式
• 确认Xcode的scheme配置：如果使用Release模式测试，需要在Xcode中切换到Release scheme再构建

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