关闭

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

标签: 8081端口占用同时运行多个rn项目react-native
2667人阅读 评论(1) 收藏 举报
分类:

尊重版权,未经授权不得转载
本文出自:贾鹏辉的技术博客http://blog.csdn.net/fengyuzhengfan/article/details/77389953

当我们运行一个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监听端口) 的教程即可。

如果大家对修改React Native端口还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。
另外也可以关注我的新浪微博@CrazyCodeBoy,或者关注我的Github来获取更多有关React Native开发的技术干货

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

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

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

参考

3
0
查看评论

React Native Android 8081端口占用问题

最近配置React Native在window环境下写Android程序,遇到不少坑,在此记录一下8081端口被占用的坑。检查8081端口在这里我们先用cmd命令提示符检查一下8081端口的占用情况,在命令行输入以下命令 netstat -aon|findstr "8081"获取...
  • a944540438
  • a944540438
  • 2017-05-11 13:57
  • 2523

React Native项目遇到的问题 -> 端口号修改

看图说话一般情况下,如果本地安装过一些服务的话,ReactNeact 就会毫不犹豫的给你报出错误信息,如果你是这个错误,那么你的端口号被占用了,ReactNative默认端口为8081解决方案1:(推荐)很简单,找到使用node生成的ReactNative项目 使用node命令:在cmd命令中,切换...
  • qq_16559905
  • qq_16559905
  • 2017-02-24 19:43
  • 5705

React 修改端口号

打开react项目的 package.json文件将 scripts中的start键值对   "start": "react-scripts start"   修改为"scripts": { "...
  • u011047066
  • u011047066
  • 2017-09-08 11:30
  • 1354

Linux firewall-cmd 命令详解

宽为限 紧用功 功夫到 滞塞通 firewall-cmd Linux上新用的防火墙软件,跟iptables差不多的工具。补充说明firewall-cmd 是 firewalld的字符界面管理工具,firewalld是centos7的一大特性,最大的好处有两个:支持动态更新,不用重启服务;第二个就是...
  • GMingZhou
  • GMingZhou
  • 2017-09-26 00:15
  • 389

React-native 关于 android真机解决出现连不上服务器

我们都知道使用RN开发android,我们要运行程序可以使用 //android 5.0之前要反向代理喜爱 5.0之后可以不用 但是你写也没关系 adb reverse tcp:8081 tcp:8081 //run app react-native run-andorid这时候假如你是使用模拟...
  • ostea
  • ostea
  • 2016-05-20 07:54
  • 954

react-native遇到的坑,及解决方法

在react-native 0.26.0 版本 1. 引入头文件 var  类名 = './类名' 会报Super expression must either be null or a function, not undefined  解决方法 export ...
  • u010500895
  • u010500895
  • 2016-06-13 09:37
  • 9817

React Native开发中解决Android端口被占用

一、常规方法 进入项目文件中 打开黑窗口输入:netstat -aon|findstr 5037 输入tasklist /fi 'PID eq 2464' 输入:taskkill /pid 2464 /f 验证:netstat -aon|findstr 5037 二、直接修改端口号自...
  • kuangshp128
  • kuangshp128
  • 2017-03-30 10:32
  • 520

react-native,react-redux和redux配合开发

react-native 的数据传递是父类传递给子类,子类通过this.props.** 读取数据,这样会造成组件多重嵌套,于是用redux可以更好的解决了数据和界面View之间的关系, 当然用到的是react-redux,是对redux的一种封装。 react基础的概念包括: 1.action是纯...
  • ling369523246
  • ling369523246
  • 2017-05-31 22:14
  • 1777

React 如何修改端口号

在根目录 package.json文件中 修改 scripts中的start键值对为 "start": "set PORT=3000&&roadhog server",
  • framic
  • framic
  • 2017-04-05 09:27
  • 4809

关于create-react-app搭建react环境并修改端口号

facebook给我们了一个类似vue-cli的脚手架的工具               首先: cnpm install -g create-react-app   ...
  • qq_32306963
  • qq_32306963
  • 2017-07-04 22:29
  • 1587
    个人资料
    • 访问:1020670次
    • 积分:12298
    • 等级:
    • 排名:第1413名
    • 原创:181篇
    • 转载:4篇
    • 译文:0篇
    • 评论:228条
    这里有你需要的干货!!!
    关注我,获取推送O_o
    你需要的,才是干货@开源项目
    博客专栏
    最新评论