修改React Native端口(如何同时运行多个React Native、8081端口占用问题)

末蓝、 2022-05-21 06:38 216阅读 0赞

当我们运行一个React Native项目的时候，React Native会启动一个默认端口号为8081的本地服务，该8081的服务就是React Native项目的一个本地服务器，用于提供JSBundle包和一些静态资源。这一切都是React Native帮开发者配置好的，一切都是那么简便，但如果出现如下几种情况，那么你需要认真阅读本文了：

1.  8081端口被其他程序占用(比如杀毒软件)，导致React Native无法正常启动8081的服务；
2.  如果你想同时运行多个React Native项目；
3.  如果你好奇React Native的默认8081是如何设置的，想修改它；

## 修改React Native监听端口 ##

启动React Native服务默认会监听`8081`端口，那么如何修改这个默认的端口呢？接下来就跟着我一步一步的来修改React Native服务默认监听的端口吧！

### 第一步：修改Server端口 ###

所谓Server端口，也就是我们通过`npm start`或者`react-native run-xxx`命令启动的React Native本地服务器的端口号，如图：   
![server\_port][server_port]

### 临时修改Server端口 ###

查看最新的`server.js`的源码，不难发现一下一段代码：

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

从上述代码中可以看出，我们在启动react native服务的时候可以为它指定一个端口号：

*  1

### 永久修改Server端口 ###

要永久修改这个默认端口号，我们需要修改`server.js`文件，`server.js`所在位置，在：

*  1

找到这个文件，打开它，然后将默认的8081端口修改为你想要的端口号即可：

![server\_port][server_port 1]

修改好之后，需要验证一下有么有生效，怎么验证呢，方法很简单，在项目根目录下运行`npm start`即可：   
![server\_port][server_port 2]  
从上图可以看出，这里我们已经将react-native的默认端口修改为了8082。

### 第二步：修改iOS项目的端口号 ###

在修改了React Native 服务的端口号之后，我们要需改iOS项目的端口号让它从新端口获取jsbundle，否则的话会出现`No bundle URL present`错误。

*  通过XCode打开React Native项目中的iOS项目；
 *  修改以下文件的端口号：   
    
    
     *  RCTWebSocketExecutor.m
     *  RCTBridgeDelegate.h
     *  RCTBundleURLProvider.m
     *  RCTInspectorDevServerHelper.mm
     *  RCTPackagerConnectionBridgeConfig.m

> ````  
> ![Show the Find navigator][]

接下就可以通过`react-native run-ios`来运行iOS项目并从新的端口读取jsbundle了。

### 第三步：修改Android项目的端口号 ###

在修改了React Native 服务的端口号之后，我们要需改Android项目的端口号让它从新端口获取jsbundle，否则的话会出现`No bundle URL present`错误。

*  打开调试工具(Dev Settings)，可以通过(command+M) 完成;
 *  点击 `Debug server host & port for device`，添加`localhost:xxx`其中xxx为新的端口地址；   
    ![localhost.png][]
 *  重新reload一下，就可以从新的端口加载jsbundle了。

> ``

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9

![AndroidInfoHelpers.png][]

## 如何同时运行多个react native项目 ##

因为端口绑定的缘故，默认情况下react native是不支持同时运行多个项目的。

如果我们要同时运行多个react native项目的话，需要为同时运行的多个项目分配不同的端口号。这样以来，我们就可以让react native支持同时运行多个项目了。关于如何为不同项目分配端口号，查看上文 \[修改React Native监听端口\](\#修改React Native监听端口) 的教程即可。

如果大家对修改React Native端口还有不明白的地方,可以在文章下方给我留言，我看到了后会及时回复的哦。   
另外也可以关注我的[新浪微博@CrazyCodeBoy][CrazyCodeBoy]，或者关注我的[Github][]来获取更多有关[React Native开发的技术干货][React Native]。

如果，大家在开发原生模块中遇到问题可以在本文的下方进行留言，我看到了后会及时回复的哦。   
另外也可以关注我的[`新浪微博`][CrazyCodeBoy]，或者关注我的[`Github`][Github]来获取更多有关[`React Native开发的技术干货`][React Native]。

参考

*  [add –port options to run-android, defaults to 8081][add _port options to run-android_ defaults to 8081]

[server_port]: /images/20220521/c40382c3ef0c44e5a57d65ddd3fd6003.png
[server_port 1]: /images/20220521/3a7e6ff58f7b47d5810f1341fca8c2e0.png
[server_port 2]: /images/20220521/435d657ba76b4c4099bef740996c9606.png
[Show the Find navigator]: /images/20220521/8fb127fdbc6b462bb410a32cdd20072f.png
[localhost.png]: /images/20220521/015e2f8cd99740f6be2596bb39f652d6.png
[AndroidInfoHelpers.png]: /images/20220521/05c192cdeeaa481e8ad27d7b1b0f63db.png
[CrazyCodeBoy]: http://weibo.com/devio
[Github]: https://github.com/crazycodeboy/
[React Native]: https://github.com/crazycodeboy/RNStudyNotes
[add _port options to run-android_ defaults to 8081]: https://github.com/facebook/react-native/pull/15316