教你轻松修改React Native的端口(如何同时运行多个React Native、8081端口占用问题)
当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBundle包和一些静态资源。这一切都是React Native帮开发者配置好的,一切都是那么简便,但如果出现如下几种情况,那么你需要认真阅读本文了:
8081端口被其他程序占用(比如杀毒软件),导致React Native无法正常启动8081的服务; 如果你想同时运行多个React Native项目; 如果你好奇React Native的默认8081是如何设置的,想修改它; 修改React Native监听端口启动React Native服务默认会监听8081端口,那么如何修改这个默认的端口呢?接下来就跟着我一步一步的来修改React Native服务默认监听的端口吧!
第一步:修改Server端口所谓Server端口,也就是我们通过npm start或者react-native run-xxx命令启动的React Native本地服务器的端口号,如图:
查看最新的server.js的源码,不难发现一下一段代码:
... 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。
在修改了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
接下就可以通过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 localhost.png](http://www.devio.org/img/post/20170819/localhost.png)
另外,如果你的项目是源码级依赖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端口还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。
参考
add --port options to run-android, defaults to 8081相关文章
- 如何写出漂亮的React组件
- 安装create-react-app
- react项目配合diff实现文件对比差异功能
- React Native如何做性能优化
- 原生项目如何从零开始集成 React Native
- React Native将license修改为MIT意欲何为
- React Native之轻量级存储AsyncStorage
- [Full-stack] 前端框架鼻祖 - React.js
- 如何评价ionic和react native?
- React深入 - 手写redux api
- react--redux+antd实现todoList
- RN:如何创建一个react native包
- 如何升级到 React 18
- 如何实现 React 组件的可复用性
- 在React项目中,如何优雅的优化长列表
- React和Vue中,是如何监听变量变化的
- 如何使用 webpack 4 和 Babel 构建 React 应用
- React如何渲染大数据量的列表?
- 如何高效管理 React Native 项目中的图片资源
- React Native 文档查看组件
- 集成 jpush-react-native 常见问题汇总 (iOS 篇)
- React Native系列之Native Modules
- React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用