教你轻松修改React Native的端口(如何同时运行多个React Native、8081端口占用问题)

简介: 当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBundle包和一些静态资源。这一切都是React Native帮开发者配置好的,一切都是那么简便,但如果出现如下几种情况,那么你需要认真阅读本文了: 1. 8081端口被其他程序占用(比如杀毒软件)

当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBundle包和一些静态资源。这一切都是React Native帮开发者配置好的,一切都是那么简便,但如果出现如下几种情况,那么你需要认真阅读本文了:

  1. 8081端口被其他程序占用(比如杀毒软件),导致React Native无法正常启动8081的服务;
  2. 如果你想同时运行多个React Native项目;
  3. 如果你好奇React Native的默认8081是如何设置的,想修改它;

修改React Native监听端口

启动React Native服务默认会监听8081端口,那么如何修改这个默认的端口呢?接下来就跟着我一步一步的来修改React Native服务默认监听的端口吧!

第一步:修改Server端口

所谓Server端口,也就是我们通过npm start或者react-native run-xxx命令启动的React Native本地服务器的端口号,如图:
server_port

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

server_port

修改好之后,需要验证一下有么有生效,怎么验证呢,方法很简单,在项目根目录下运行npm start即可:
server_port
从上图可以看出,这里我们已经将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

Show the Find navigator

接下就可以通过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为新的端口地址;
    localhost.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;
  ...

AndroidInfoHelpers.png

如何同时运行多个react native项目

因为端口绑定的缘故,默认情况下react native是不支持同时运行多个项目的。

如果我们要同时运行多个react native项目的话,需要为同时运行的多个项目分配不同的端口号。这样以来,我们就可以让react native支持同时运行多个项目了。关于如何为不同项目分配端口号,查看上文 修改React Native监听端口 的教程即可。

如果大家对修改React Native端口还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。

参考

相关文章
|
2天前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
2天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
2天前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
2天前
|
移动开发 前端开发 JavaScript
使用React Native进行跨平台移动开发
【5月更文挑战第13天】React Native是Facebook的跨平台移动开发框架,基于JavaScript和React,允许开发者编写原生应用。它提供跨平台性、原生性能、平缓的学习曲线及丰富的社区支持。开发流程包括安装CLI、创建项目、编写代码、运行调试及测试发布。进阶应用涉及状态管理、性能优化、原生模块集成和自动化测试。React Native降低了开发成本,提升了效率,是移动开发的优选方案。
|
2天前
|
开发框架 前端开发 JavaScript
【专栏】对比分析两种流行的跨平台开发框架——Flutter和React Native,探讨它们的优势、劣势以及适用场景
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
|
2天前
|
Dart 前端开发 JavaScript
《跨平台移动应用开发探索:Flutter vs React Native》
在移动应用开发领域,跨平台技术日益成熟,Flutter和React Native作为两大主流框架备受关注。本文将对比Flutter和React Native在性能、开发体验、生态系统等方面的优劣,并探讨它们在不同场景下的适用性,以帮助开发者选择最适合自己项目的技术方案。
|
2天前
|
缓存 前端开发 Android开发
React Native
React Native
16 6
|
2天前
|
前端开发 JavaScript Android开发
框架分析(8)-React Native
框架分析(8)-React Native
|
2天前
|
Python
Django项目如何通过修改manage.py指定运行的地址和端口号
Django项目如何通过修改manage.py指定运行的地址和端口号
25 2

热门文章

最新文章