教你輕鬆修改React Native埠(如何同時執行多個React Native、8081端口占用問題)
期待已久的新課上線啦!解鎖React Native開發新姿勢,一網打盡React Native最新與最熱技術,點我Get!!!
當我們執行一個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監聽埠) 的教程即可。
如果大家對修改React Native埠還有不明白的地方,可以在文章下方給我留言,我看到了後會及時回覆的哦。
另外也可以關注我的新浪微博@CrazyCodeBoy,或者關注我的Github來獲取更多有關React Native開發的技術乾貨。
告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家現可以看視訊學React Native了。
如果,大家在開發原生模組中遇到問題可以在本文的下方進行留言,我看到了後會及時回覆的哦。
另外也可以關注我的新浪微博
,或者關注我的Github
來獲取更多有關React Native開發的技術乾貨
。
推薦學習:視訊教程《React Native開發跨平臺GitHub App》
參考