教你轻松修改React Native端口

告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。

当我们运行一个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端口

查看最新的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.m
    • RCTBridgeDelegate.h
    • RCTBundleURLProvider.m
    • RCTInspectorDevServerHelper.mm
    • RCTPackagerConnectionBridgeConfig.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端口还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。 另外也可以关注我的新浪微博@CrazyCodeBoy,或者关注我的Github来获取更多有关React Native开发的技术干货

告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。

如果,大家在开发原生模块中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。 另外也可以关注我的新浪微博,或者关注我的Github来获取更多有关React Native开发的技术干货

推荐学习:视频教程《React Native开发跨平台GitHub App》

参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

selenium+python自动化77-autoit文件上传

前言 关于非input文件上传,点上传按钮后,这个弹出的windows的控件了,已经跳出三界之外了,不属于selenium的管辖范围(selenium不是万能的...

4054
来自专栏ArrayZoneYour的专栏

借助Babel 7和Webpack构建React Toolchain

React不是完全开箱即用的。它使用了一些最近node才支持的关键字和语法(在本教程中我使用了v 9.3.0版本)。因此需要一些很麻烦的设置,但是Faceboo...

2584
来自专栏张戈的专栏

WordPress开启颜色评论但不造成XSS漏洞的小方法

前段时间分享过一些 XSS 漏洞的修复技巧,而且也说到了 WordPress 开启颜色评论需要在 functions.php 中插入如下代码,也就是禁用 Wor...

35410
来自专栏Crossin的编程教室

【编程课堂】以 jQuery 之名 - 爬虫利器 PyQuery

很多读者在学习了 Python 之后都想做一些爬虫程序,去网上采集数据或完成一些自动化操作。因此,我们也制作了一套爬虫实战课程,目前正在最后的完善中,很快将和各...

3547
来自专栏码生

Chrome 浏览器最牛插件之一 Vimium

最近学习了一下,整理了一下官方的默认按键。其中我使用到的都进行了中文翻译,一些没有翻译的是我没有使用的,这部分理解不深,不想误导大家,所以将英文原文放在这里,还...

2471
来自专栏逸鹏说道

【开源】1句代码搞定图片批量上传,无需什么代码功底【无语言界限】

开源地址:https://github.com/dunitian/LoTUploader WebUploader基础上的封装改善,一句代码全部实现(样式美化,实...

2989
来自专栏极客编程

简单介绍一下vue2.0

Vue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目。 另外Vue的核心库...

1792
来自专栏前端杂货铺

iframe编程的一些问题

前几天做一个用iframe显示曲线图的demo,发现对iframe的contentDocument绑定 onclick事件都无效,而在页面中对iframe.co...

3426
来自专栏Android知识点总结

01-React搭建react环境及SCSS的配置

5552
来自专栏企鹅号快讯

前端性能优化——桌面浏览器前端优化策略

作者:ouven https://my.oschina.net/zhangstephen/blog/1601382 摘要: 前端性能优化是一个很宽泛的概念,本书...

2486

扫码关注云+社区

领取腾讯云代金券