如何正确使用RCT_METRO_PORT修改Metro打包工具运行端口

核心逻辑 #

通过环境变量覆盖RN默认的RCT_METRO_PORT宏定义，不需要修改全局代码里的8081端口引用，同时适配react-native run-ios、xcodebuild打包、Detox自动化测试三类场景。

方案1：脚本直接传环境变量（最适合多版本并行测试场景） #

不用修改项目配置，直接在执行命令前加端口变量即可：

• 启动指定端口的Metro服务，package.json脚本配置示例：

"scripts": {
  "start:8082": "RCT_METRO_PORT=8082 react-native start",
  "start:8083": "RCT_METRO_PORT=8083 react-native start"
}

• 适配react-native run-ios命令示例：

RCT_METRO_PORT=8082 react-native run-ios --scheme myapp

• 适配xcodebuild打包场景，你提供的脚本修改后示例：

set -o pipefail && RCT_METRO_PORT=8082 xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name="iPhone 12 Pro" -derivedDataPath ios/build > /dev/null

• Detox自动化适配：直接在.detoxrc.js配置中给不同测试版本的构建、启动命令加上对应端口变量即可，无需手动修改模拟器开发者工具。

方案2：.env文件固定端口配置（适合固定端口场景） #

如果需要长期固定端口不用每次传参，可以配合react-native-config读取.env配置：

• 项目根目录.env文件新增配置：

RCT_METRO_PORT=8082

• 打开iOS项目Podfile，新增post_install钩子覆盖原生默认端口定义：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'React-Core'
      target.build_configurations.each do |config|
        env_file = File.join(__dir__, '..', '.env')
        if File.exist?(env_file)
          port = File.read(env_file).match(/RCT_METRO_PORT=(\d+)/)&.captures&.first || '8081'
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)']
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] << "RCT_METRO_PORT=#{port}"
        end
      end
    end
  end
end

• 执行pod install后配置生效，后续所有run-ios、xcodebuild命令都会自动读取.env里的端口配置，不需要额外传参。

注意事项 #

• Release包不需要配置Metro端口，正式包已经内置了jsbundle，不会连接本地Metro服务
• 多版本并行测试时，要提前启动对应端口的Metro实例，避免端口冲突

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