React Native中process.env无法读取.env及终端环境变量问题

问题概述 #

运行iOS/Android时，process.env无法读取终端环境变量；同时.env文件中定义的变量在babel.config.js和index.tsx的process.env中均无法显示。

相关文件与操作信息 #

.env文件内容

ENV_VAR1=testabc
ENV_VAR2=testdef

babel.config.js代码片段

console.log(process.env);
module.exports = {
....
}

终端执行命令及输出

user@Users-MacBook-Pro react_frontend % yarn start --reset-cache   
warning:  Obfuscation SKIPPED [Not a *bundle* command]
...（Metro启动图形化信息省略）
warning: the transform cache was reset.
                Welcome to Metro v0.72.3
              Fast - Scalable - Integrated



To reload the app press "r"
To open developer menu press "d"
user@Users-MacBook-Pro react_frontend % source .env && echo $ENV_VAR1 && npx react-native run-android
testabc
info Starting JS server...
info Installing the app...

Metro终端输出的process.env内容

仅包含系统环境变量，无自定义变量：

...
transform[stdout]: {
transform[stdout]:   MANPATH: '/opt/homebrew/share/man::',
...（其余系统环境变量省略）
transform[stdout]: }

解决步骤 #

1. 让业务代码（如index.tsx）读取.env变量 #

React Native默认不支持直接读取.env文件，需借助react-native-dotenv插件：

• 安装依赖：

  yarn add react-native-dotenv --dev
  

• 修改babel.config.js，添加插件配置：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ['module:react-native-dotenv', {
        moduleName: '@env', // 导入时的模块名
        path: '.env', // 指定.env文件路径
        allowUndefined: true // 允许变量未定义
      }]
    ]
  };
  

• 在业务代码中导入使用：

  import { ENV_VAR1, ENV_VAR2 } from '@env';
  
  console.log('自定义环境变量:', ENV_VAR1, ENV_VAR2);
  

2. 让babel.config.js读取.env变量 #

babel.config.js是Node.js环境执行的，需手动加载dotenv：

• 安装dotenv：

  yarn add dotenv --dev
  

• 在babel.config.js顶部添加加载代码：

  require('dotenv').config();
  console.log(process.env); // 现在能输出.env中的变量了
  module.exports = {
    // 原有的presets和plugins配置
  };
  

3. 读取终端传入的环境变量 #

终端直接传入的变量需在启动Metro或打包时注入，不要用source .env的方式，直接在命令前拼接变量：

# 启动Android时传入变量
ENV_VAR1=testabc npx react-native run-android
# 启动Metro时传入变量
ENV_VAR1=testabc yarn start --reset-cache

4. 关键注意事项 #

• 每次修改.env或babel配置后，必须重启Metro并清除缓存：yarn start --reset-cache
• .env文件必须放在项目根目录，确保路径正确
• 若使用TypeScript，需在tsconfig.json中添加@env的类型声明：

  {
    "compilerOptions": {
      "types": ["react-native-dotenv"]
    }
  }
  

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