Mac下非Expo/CRA的React Native脚本环境变量传递问题排查

核心原因 #

React Native 的 JS 运行环境（Metro 打包器、设备/模拟器的 JS 引擎）和启动项目的 bash 进程是完全隔离的——bash 里 export 的环境变量不会自动传递到 RN 的 JS 上下文，这就是你拿不到 ipAddress 的根本原因。

具体排查与解决步骤 #

1. 先确认环境变量是否传递到 Metro 进程 #

bash 脚本里的 export 和启动 Metro 的命令必须在同一个进程里执行。比如你的 start 脚本要写成这样：

# 正确写法：同进程内执行 export + 启动命令
ipAddress=$(ifconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}')
export ipAddress=$ipAddress
echo $ipAddress
node node_modules/react-native/cli.js start

如果是先单独运行脚本 export 变量，再手动启动 Metro，变量肯定传不过去。

2. 通过 Metro 配置注入环境变量（最可靠） #

Metro 支持自定义配置直接把变量注入 JS 上下文：

• 项目根目录修改/创建 metro.config.js：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const child_process = require('child_process');

// 直接在 Metro 配置里获取本机 IP
const getLocalIp = () => {
  try {
    const ip = child_process.execSync('ifconfig | grep "inet " | grep -v 127.0.0.1 | awk \'{print $2}\'').toString().trim();
    return ip || '127.0.0.1';
  } catch (err) {
    return '127.0.0.1';
  }
};

const customConfig = {
  transformer: {
    minifierConfig: {
      keep_classnames: true,
      keep_fnames: true,
    },
  },
  // 注入环境变量到全局
  env: {
    ipAddress: getLocalIp(),
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), customConfig);

• 然后在 config.js 里直接读取：

export const API_BASE = `http://${process.env.ipAddress}:3000`;

3. 用 react-native-dotenv 管理环境变量（推荐） #

如果需要更灵活的多环境配置，用这个插件：

1. 安装依赖：

npm install react-native-dotenv --save-dev

2. 修改 babel.config.js：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['module:react-native-dotenv', {
      moduleName: '@env',
      path: '.env',
      allowUndefined: true,
    }],
  ],
};

3. 在启动脚本里自动生成 .env 文件：

# 在 start 脚本开头添加
echo "ipAddress=$(ifconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}')" > .env

4. 在 config.js 里导入使用：

import { ipAddress } from '@env';
export const API_BASE = `http://${ipAddress}:3000`;

4. 排查网络连通性问题 #

即使环境变量正常，也要确认：

• 设备/模拟器和 Mac 在同一个 Wi-Fi 网络下
• Mac 的防火墙没有拦截后端服务的端口
• 后端服务监听的是 0.0.0.0 而非 127.0.0.1（否则设备无法访问）

常见误区 #

• 别指望 bash 的 export 能直接穿透到 RN 的 JS 环境，两者属于不同进程空间
• 不要在 RN 的业务代码里调用 Node.js 的 child_process，设备/模拟器上没有 Node.js 运行环境

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