如何让 React Native 监听其他端口

这个问题实在是困扰了我蛮久的，而且 iOS 和 Android 的更换端口体验完全不一致，iOS 完全是自成一套，就挺莫名其妙的。难怪到现在还没 1.0。 首先，RN使用者都知道他默认监听的端口是 8081，你去 RN 的 XCode 项目里面搜 8081 总能搜到点东西。找到 RCT_METRO_PORT，这是个宏定义。看到宏定义，我想到应该可以在 Build Setting 里面添加预处理宏的方式修改这个宏的值。 下面是 RCT_METRO_PORT 的代码，也提示你应该可以用预处理宏的方式来预设。

/**
 * Add the default Metro packager port number
 */
#ifndef RCT_METRO_PORT
#define RCT_METRO_PORT 8081
#else
// test if RCT_METRO_PORT is empty
#define RCT_METRO_PORT_DO_EXPAND(VAL) VAL##1
#define RCT_METRO_PORT_EXPAND(VAL) RCT_METRO_PORT_DO_EXPAND(VAL)
#if !defined(RCT_METRO_PORT) || (RCT_METRO_PORT_EXPAND(RCT_METRO_PORT) == 1)
// Only here if RCT_METRO_PORT is not defined
// OR RCT_METRO_PORT is the empty string
#undef RCT_METRO_PORT
#define RCT_METRO_PORT 8081
#endif
#endif

经过我的测试，实际上，我只需要在 React-Core 这个项目中添加相应的预处理宏就能实现端口更改。

Pods -> Targets -> React-Core -> Build Setting -> Preprocessor Marcos -> Debug -> 添加 RCT_METRO_PORT=9000

然而这种改法挺不直观的，我们只用直接改 Podfile 就行，在 post_install 的 区块下添加以下代码。

installer.pods_project.targets.each do |target|
  if target.name == 'React-Core'
    target.build_configurations.each do |config|
      if (config.name == "Debug") and (ENV["RCT_METRO_PORT"] != nil)
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)', "RCT_METRO_PORT=" + ENV["RCT_METRO_PORT"]]
      end
    end
  end
end

然后，在你的 package.json 里面的 scripts 添加这个代码。

{
  "scripts": {
    "pods": "cd ./ios && RCT_METRO_PORT=8082 pod install",
    "ios": "react-native run-ios --port=8082 --verbose",
    "start": "react-native start --port 8082",
  }
}

然后命令行执行 yarn pods && yarn ios 这样就能自定义到特定端口。

总结

最后，只有 iOS 有这个问题。如果有帮助到你