react native改动端口号的办法

lxf2023-03-17 10:33:01

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的栏目-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本地云服务器服务器端口,如下图:
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端口号调整为自己想要的服务器端口就可以:

react native改动端口号的办法

改动好以后,通过验证一下有没有起效,怎么验证呢,其实很简单,在工程目录下运作npm start就可以:
react native改动端口号的办法

从上图能够得知,接下来我们已将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

react native改动端口号的办法

接下来就可以用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给新的端口地址;
    react native改动端口号的办法
  • 再次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监视端口号) 的步骤就可以了。

如果大家对改动React Native端口号也有不懂的地方,能够在本文下边私信我,我看见了之后一一回复的啦。
另外也可关注我的新浪微博@CrazyCodeBoy,或是关注我的Github来获得更多的相关React Native研发的技术性干货知识。

告诉你们一个好消息,给大家精心准备的React Native视频教学发布,大伙儿现能看视频学React Native了。

假如,大伙儿在研发原生态模块中遇到困难能够在这篇文章的下方开展评论,我看见了之后一一回复的啦。
另外也可以关注我的微博,或是关注我的Github来获得更多的相关React Native研发的技术性干货知识

强烈推荐学习培训:《react视频教程》

以上就是关于react native如何修改端口号的具体内容,大量欢迎关注AdminJS其他类似文章!