期待已久的新課上線啦荒吏！解鎖React Native開發(fā)新姿勢敛惊，一網打盡React Native最新與最熱技術，點我Get!!!
當我們運行一個React Native項目的時候绰更，React Native會啟動一個默認端口號為8081的本地服務瞧挤，該8081的服務就是React Native項目的一個本地服務器，用于提供JSBundle包和一些靜態(tài)資源动知。這一切都是React Native幫開發(fā)者配置好的皿伺，一切都是那么簡便，但如果出現如下幾種情況盒粮，那么你需要認真閱讀本文了：
- 8081端口被其他程序占用(比如殺毒軟件)鸵鸥，導致React Native無法正常啟動8081的服務；
- 如果你想同時運行多個React Native項目丹皱；
- 如果你好奇React Native的默認8081是如何設置的妒穴，想修改它；
修改React Native監(jiān)聽端口
啟動React Native服務默認會監(jiān)聽8081端口摊崭，那么如何修改這個默認的端口呢讼油？接下來就跟著我一步一步的來修改React Native服務默認監(jiān)聽的端口吧！
第一步：修改Server端口
所謂Server端口呢簸，也就是我們通過npm start或者react-native run-xxx命令啟動的React Native本地服務器的端口號矮台，如圖：
臨時修改Server端口
查看最新的server.js的源碼乏屯，不難發(fā)現一下一段代碼：
...
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
Show the Find navigator
接下就可以通過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為新的端口地址厌杜；
localhost.png - 重新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監(jiān)聽端口](#修改React Native監(jiān)聽端口) 的教程即可灯谣。
如果大家對修改React Native端口還有不明白的地方,可以在文章下方給我留言法褥，我看到了后會及時回復的哦。
另外也可以關注我的新浪微博@CrazyCodeBoy酬屉，或者關注我的Github來獲取更多有關React Native開發(fā)的技術干貨。
告訴大家一個好消息揍愁，為大家精心準備的React Native視頻教程發(fā)布了呐萨，大家現可以看視頻學React Native了。
如果莽囤，大家在開發(fā)原生模塊中遇到問題可以在本文的下方進行留言谬擦，我看到了后會及時回復的哦。
另外也可以關注我的新浪微博朽缎，或者關注我的Github來獲取更多有關React Native開發(fā)的技術干貨惨远。
推薦學習：視頻教程《React Native開發(fā)跨平臺GitHub App》
參考
