当我们运行一个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本地服务器的端口号,如图:
第二步:修改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
接下就可以通过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为新的端口地址;
- 重新reload一下,就可以从新的端口加载jsbundle了。