WWW.lllT.neT

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的栏目-CSDNblog

盼望已久的新课上线啦!开启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怎么修改端口号的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:react native怎么修改端口号发布于2021-12-08 13:54:01