如何讓 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 有這個問題。如果有幫助到你