當(dāng)我們運行一個React Native項目的時候，React Native會啟動一個默認端口號為8081的本地服務(wù)，該8081的服務(wù)就是React Native項目的一個本地服務(wù)器，用于提供JSBundle包和一些靜態(tài)資源。這一切都是React Native幫開發(fā)者配置好的，一切都是那么簡便，但如果出現(xiàn)如下幾種情況，那么你需要認真閱讀本文了：

8081端口被其他程序占用(比如殺毒軟件)，導(dǎo)致React Native無法正常啟動8081的服務(wù)；
如果你想同時運行多個React Native項目；
如果你好奇React Native的默認8081是如何設(shè)置的，想修改它；
修改React Native監(jiān)聽端口
啟動React Native服務(wù)默認會監(jiān)聽8081端口，那么如何修改這個默認的端口呢？接下來就跟著我一步一步的來修改React Native服務(wù)默認監(jiān)聽的端口吧！

第一步：修改Server端口
所謂Server端口，也就是我們通過npm start或者react-native run-xxx命令啟動的React Native本地服務(wù)器的端口號，如圖：

image.png

第二步：修改iOS項目的端口號

在修改了React Native 服務(wù)的端口號之后，我們要需改iOS項目的端口號讓它從新端口獲取jsbundle，否則的話會出現(xiàn)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

image.png

接下就可以通過react-native run-ios來運行iOS項目并從新的端口讀取jsbundle了。

第三步：修改Android項目的端口號

在修改了React Native 服務(wù)的端口號之后，我們要需改Android項目的端口號讓它從新端口獲取jsbundle，否則的話會出現(xiàn)No bundle URL present錯誤。

提示：如果你的React Native項目沒有Android模塊可以忽略此步驟；

• 打開調(diào)試工具(Dev Settings)，可以通過(command+M) 完成;

  
  
  image.png

• 點擊 Debug server host & port for device，添加localhost:xxx其中xxx為新的端口地址；

• 重新reload一下，就可以從新的端口加載jsbundle了。