662
教你輕鬆修改React Native的端口(如何同時運行多個React Native、8081端口占用問題)
當我們運行一個React Native項目的時候，React Native會啟動一個默認端口號為8081的本地服務，該8081的服務就是React Native項目的一個本地服務器，用於提供JSBundle包和一些靜態資源。這一切都是React Native幫開發者配置好的，一切都是那麼簡便，但如果出現如下幾種情況，那麼你需要認真閱讀本文了：
- 8081端口被其他程序占用(比如殺毒軟件)，導致React Native無法正常啟動8081的服務；
- 如果你想同時運行多個React Native項目；
- 如果你好奇React Native的默認8081是如何設置的，想修改它；
修改React Native監聽端口
啟動React Native服務默認會監聽8081端口，那麼如何修改這個默認的端口呢？接下來就跟著我一步一步的來修改React Native服務默認監聽的端口吧！
第一步：修改Server端口
所謂Server端口，也就是我們通過npm start或者react-native run-xxx命令啟動的React Native本地服務器的端口號，如圖：
臨時修改Server端口
查看最新的server.js的源碼，不難發現一下一段代碼：
...
command: '--port [number]',
default: 8081,
parse: (val: string) => Number(val),
...
從上述代碼中可以看出，我們在啟動react native服務的時候可以為它指定一個端口號：
react-native start --port=8082
提示：上述代碼，是2017年8月1號提交的一個pull request，所以說在2017年8月1之前的React Native版本是沒有這個功能的。
永久修改Server端口
要永久修改這個默認端口號，我們需要修改server.js文件，server.js所在位置，在：
你的項目名稱/node_modules/react-native/local-cli/server/server.js
找到這個文件，打開它，然後將默認的8081端口修改為你想要的端口號即可：
修改好之後，需要驗證一下有麼有生效，怎麼驗證呢，方法很簡單，在項目根目錄下運行npm start即可：
從上圖可以看出，這裏我們已經將react-native的默認端口修改為了8082。
第二步：修改iOS項目的端口號
在修改了React Native 服務的端口號之後，我們要需改iOS項目的端口號讓它從新端口獲取jsbundle，否則的話會出現No bundle URL present錯誤。
提示：如果你的React Native項目沒有iOS模塊可以忽略此步驟；
- 通過XCode打開React Native項目中的iOS項目；
- 修改以下文件的端口號：
- RCTWebSocketExecutor.m
- RCTBridgeDelegate.h
- RCTBundleURLProvider.m
- RCTInspectorDevServerHelper.mm
- RCTPackagerConnectionBridgeConfig.m
為了方便查找這些文件並定位到端口號，你可以借助XCode的
Show the Find navigator功能來查找文本8081
接下就可以通過react-native run-ios來運行iOS項目並從新的端口讀取jsbundle了。
第三步：修改Android項目的端口號
在修改了React Native 服務的端口號之後，我們要需改Android項目的端口號讓它從新端口獲取jsbundle，否則的話會出現No bundle URL present錯誤。
提示：如果你的React Native項目沒有Android模塊可以忽略此步驟；
- 打開調試工具(Dev Settings)，可以通過(command+M) 完成;
- 點擊
Debug server host & port for device，添加localhost:xxx其中xxx為新的端口地址；
- 重新reload一下，就可以從新的端口加載jsbundle了。
另外，如果你的項目是源碼級依賴React Native的話，也可以通過修改
AndroidInfoHelpers.java文件來完成對Android項目的端口的修改。
public class AndroidInfoHelpers {
public static final String EMULATOR_LOCALHOST = "10.0.2.2";
public static final String GENYMOTION_LOCALHOST = "10.0.3.2";
public static final String DEVICE_LOCALHOST = "localhost";
private static final int DEBUG_SERVER_HOST_PORT = 8081;
private static final int INSPECTOR_PROXY_PORT = 8081;
...
如何同時運行多個react native項目
因為端口綁定的緣故，默認情況下react native是不支持同時運行多個項目的。
如果我們要同時運行多個react native項目的話，**需要為同時運行的多個項目分配不同的端口號。**這樣以來，我們就可以讓react native支持同時運行多個項目了。關於如何為不同項目分配端口號，查看上文 修改React Native監聽端口 的教程即可。
如果大家對修改React Native端口還有不明白的地方,可以在文章下方給我留言，我看到了後會及時回複的哦。
參考
最後更新：2017-08-25 15:03:00