搜索

首页  >  文章  >  web前端  >  react native怎么修改端口

react native怎么修改端口

藏色散人
藏色散人原创
2021-11-26 11:14:041910浏览

react native修改端口的方法：1、通过npm start命令启动React Native本地服务器的端口号；2、修改server.js文件；3、将默认的8081端口修改为你想要的端口号即可。

react native怎么修改端口

本文操作环境：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本地服务器的端口号，如图：
812ff75968c4e568ee70459a5aa167f.png

临时修改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端口修改为你想要的端口号即可：

23272982fe736fec22f750842028729.png

修改好之后，需要验证一下有么有生效，怎么验证呢，方法很简单，在项目根目录下运行npm start即可：
d4b059c7242f251e018f883fd2b69a9.png

从上图可以看出，这里我们已经将react-native的默认端口修改为了8082。

第二步：修改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

9542ac40e1d6db6e87ef4b343a081b3.png

接下就可以通过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为新的端口地址；
    9395262273104c4587ee0a68bbcc5dc.png
  • 重新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;
  ...

47677d5cf9faa5ef4ee3e6987b37bb9.png

如何同时运行多个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怎么修改端口的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：react dva 怎么更改state下一篇：react怎么实现文件转base64

相关文章

查看更多