React Native配置react-native-dotenv后.env变量无法正常使用

按以下顺序排查修复即可：

• 补全babel配置语法
  你贴的babel.config.js缺少头部的导出声明，配置根本不会被babel加载，完整正确配置如下：

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module:react-native-dotenv",
      {
        moduleName: "@env",
        path: ".env",
        blacklist: null,
        whitelist: null,
        safe: false,
        allowUndefined: false,
      },
    ],
  ],
};

• 修正.env文件写法
  v3版本的dotenv解析器不会自动忽略等号两侧的空格，你当前的写法会把键识别为TEST_API （末尾带空格），值识别为 123（开头带空格），直接改成无空格格式：

TEST_API=123

同时确认.env文件和package.json、babel.config.js在同一级根目录，不要放到src等子文件夹内。

• 修正导入语句
  你当前的导入语句缺少指定来源，你在配置里自定义的模块别名是@env，正确导入写法：

import { TEST_API } from '@env'

• 清除缓存重启服务
  babel相关配置、环境变量改动后必须重置metro缓存才会生效，先停掉当前运行的metro服务，执行以下命令：

# 重置缓存启动metro
npx react-native start --reset-cache
# 用yarn的话执行 yarn start --reset-cache

metro启动后，重新执行npx react-native run-android或者npx react-native run-ios编译安装包即可正常读取到环境变量。

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