reactnative如何修改端口

這篇文章主要介紹react native如何修改端口，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)專注于網(wǎng)站設(shè)計制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計、網(wǎng)站制作、網(wǎng)站開發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點出發(fā),讓客戶在網(wǎng)絡(luò)營銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴謹?shù)膽B(tài)度對待客戶，用專業(yè)的服務(wù)創(chuàng)造價值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

react native修改端口的方法：1、通過npm start命令啟動React Native本地服務(wù)器的端口號；2、修改server.js文件；3、將默認的8081端口修改為你想要的端口號即可。

本文操作環(huán)境：Windows7系統(tǒng)、react17.0.1、Dell G3。

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

• 8081端口被其他程序占用(比如殺毒軟件)，導致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ù)器的端口號，如圖：

臨時修改Server端口

查看最新的server.js的源碼，不難發(fā)現(xiàn)一下一段代碼：

...
command: '--port [number]',
default: 8081,
parse: (val: string) => Number(val),
...

從上述代碼中可以看出，我們在啟動react native服務(wù)的時候可以為它指定一個端口號：

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即可：

從上圖可以看出，這里我們已經(jīng)將react-native的默認端口修改為了8082。

第二步：修改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

接下就可以通過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) 完成;

• 點擊 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如何修改端口”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：reactnative如何修改端口
瀏覽路徑：http://muchs.cn/article38/igeipp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站營銷、、Google、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)