使用react-native-dotenv切换环境时TEST_LABEL始终显示Development如何解决

问题根源 #

react-native-dotenv默认不会自动根据NODE_ENV加载对应环境的.env配置文件，且默认开启的babel固定缓存会导致环境变量更新后不生效。

解决方案 #

1. 修改babel.config.js配置

调整缓存策略，同时指定按环境加载对应配置文件：

module.exports = function (api) {
  // 基于当前NODE_ENV生成缓存标识，不同环境不共用编译缓存
  api.cache(() => process.env.NODE_ENV);
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ["module:react-native-dotenv",
        {
          "moduleName": "@env",
          // 配置env文件加载优先级：环境专属配置 > 通用配置
          "path": [
            `.env.${process.env.NODE_ENV}`,
            ".env"
          ]
        }
      ]
    ]
  };
};

2. 修改启动脚本添加缓存清除参数

修改package.json中的scripts，启动时强制清除缓存，避免旧编译产物残留：

"scripts": {
    "start": "react-native start",
    "development": "NODE_ENV=development expo start --clear",
    "production": "NODE_ENV=production expo start --clear",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest"
},

3. 验证生效

完全退出之前的项目启动进程，重新执行对应环境的启动命令即可：

• 执行npm run development时页面显示Development
• 执行npm run production时页面显示Production

额外注意 #

如果修改后仍未生效，可手动删除项目下node_modules/.cache文件夹后再启动项目。

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