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

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

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

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

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

• 8081端口被其他程序占用(比如殺毒軟件)，導(dǎo)致React Native無法正常啟動(dòng)8081的服務(wù)；

• 如果你想同時(shí)運(yùn)行多個(gè)React Native項(xiàng)目；

• 如果你好奇React Native的默認(rèn)8081是如何設(shè)置的，想修改它；

修改React Native監(jiān)聽端口

啟動(dòng)React Native服務(wù)默認(rèn)會(huì)監(jiān)聽8081端口，那么如何修改這個(gè)默認(rèn)的端口呢？接下來就跟著我一步一步的來修改React Native服務(wù)默認(rèn)監(jiān)聽的端口吧！

第一步：修改Server端口

所謂Server端口，也就是我們通過npm start或者react-native run-xxx命令啟動(dòng)的React Native本地服務(wù)器的端口號(hào)，如圖：

臨時(shí)修改Server端口

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

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

從上述代碼中可以看出，我們在啟動(dòng)react native服務(wù)的時(shí)候可以為它指定一個(gè)端口號(hào)：

react-native start --port=8082

提示：上述代碼，是2017年8月1號(hào)提交的一個(gè)pull request，所以說在2017年8月1之前的React Native版本是沒有這個(gè)功能的。

永久修改Server端口

要永久修改這個(gè)默認(rèn)端口號(hào)，我們需要修改server.js文件，server.js所在位置，在：

你的項(xiàng)目名稱/node_modules/react-native/local-cli/server/server.js

找到這個(gè)文件，打開它，然后將默認(rèn)的8081端口修改為你想要的端口號(hào)即可：

修改好之后，需要驗(yàn)證一下有么有生效，怎么驗(yàn)證呢，方法很簡單，在項(xiàng)目根目錄下運(yùn)行npm start即可：

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

第二步：修改iOS項(xiàng)目的端口號(hào)

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

提示：如果你的React Native項(xiàng)目沒有iOS模塊可以忽略此步驟；

• 通過XCode打開React Native項(xiàng)目中的iOS項(xiàng)目；

• 修改以下文件的端口號(hào)：

• RCTWebSocketExecutor.m

• RCTBridgeDelegate.h

• RCTBundleURLProvider.m

• RCTInspectorDevServerHelper.mm

• RCTPackagerConnectionBridgeConfig.m

為了方便查找這些文件并定位到端口號(hào)，你可以借助XCode的Show the Find navigator功能來查找文本8081

接下就可以通過react-native run-ios來運(yùn)行iOS項(xiàng)目并從新的端口讀取jsbundle了。

第三步：修改Android項(xiàng)目的端口號(hào)

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

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

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

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

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

另外，如果你的項(xiàng)目是源碼級依賴React Native的話，也可以通過修改AndroidInfoHelpers.java文件來完成對Android項(xiàng)目的端口的修改。

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)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：reactnative如何修改端口
瀏覽路徑：http://aaarwkj.com/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)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)