您好,欢迎访问一九零五行业门户网

react native怎么修改端口

react native修改端口的方法:1、通过npm start命令启动react native本地服务器的端口号;2、修改server.js文件;3、将默认的8081端口修改为你想要的端口号即可。
本文操作环境:windows7系统、react17.0.1、dell g3。
react native怎么修改端口?
教你轻松修改react native端口(如何同时运行多个react native、8081端口占用问题)_fengyuzhengfan的专栏-csdn博客
期待已久的新课上线啦!解锁react native开发新姿势,一网打尽react native最新与最热技术,点我get!!!
当我们运行一个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端口查看最新的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。
第二步:修改ios项目的端口号在修改了react native 服务的端口号之后,我们要需改ios项目的端口号让它从新端口获取jsbundle,否则的话会出现no bundle url present错误。
提示:如果你的react native项目没有ios模块可以忽略此步骤;
通过xcode打开react native项目中的ios项目;修改以下文件的端口号:rctwebsocketexecutor.mrctbridgedelegate.hrctbundleurlprovider.mrctinspectordevserverhelper.mmrctpackagerconnectionbridgeconfig.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了。另外,如果你的项目是源码级依赖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监听端口](#修改react native监听端口) 的教程即可。
如果大家对修改react native端口还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。
另外也可以关注我的新浪微博@crazycodeboy,或者关注我的github来获取更多有关react native开发的技术干货。
告诉大家一个好消息,为大家精心准备的react native视频教程发布了,大家现可以看视频学react native了。
如果,大家在开发原生模块中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。
另外也可以关注我的新浪微博,或者关注我的github来获取更多有关react native开发的技术干货。
推荐学习:《react视频教程》
以上就是react native怎么修改端口的详细内容。
其它类似信息

推荐信息