native8081端口 react_教你轻松修改React Native端口(如何同时运行多个React Native、8081端口占用问题)...
当我们运行一个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本地服务器的端口号,如图:
临时修改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监听端口) 的教程即可。
如果大家对修改React Native端口还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。
另外也可以关注我的新浪微博@CrazyCodeBoy,或者关注我的Github来获取更多有关React Native开发的技术干货。
如果,大家在开发原生模块中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。
另外也可以关注我的新浪微博,或者关注我的Github来获取更多有关React Native开发的技术干货。
参考
native8081端口 react_教你轻松修改React Native端口(如何同时运行多个React Native、8081端口占用问题)...相关推荐
- native8081端口 react_教你轻松修改React Native的端口(如何同时运行多个React Native、8081端口占用问题)...
当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBun ...
- 计算机网络 路由器的端口ip,教您如何修改路由器LAN端口的IP地址
目前,大多数品牌或非品牌的有线或无线路由器通常将192.168.1.1或192.168.0.1网段用作LAN端口地址,并且使用此默认地址既不安全也不实用,例如局域网如果计算机数量过多(超过255个), ...
- 教你轻松修改PPT中剪贴画颜色
转载者: 智能变电站ppt课件 来源: www.2ppt.cn 在制作演示文稿时,为了达到满意的效果我们经常会插入漂亮的剪贴画.但有时起到的效果会相反,因为剪贴画是程序自带的 ...
- Kevg靶机渗透实现 8080端口 8081端口 1322端口实现
一.信息搜集 先使用ifconfig查看本机ip: 用nmap工具扫描本机ip段下的主机: 发现目标靶机ip为192.168.152.134 查看目标靶机开放了哪些端口: 发现80,8080,8081 ...
- 教你用ERD轻松修改系统登录密码
赛迪网--中国电脑教育报4月12日报道 在机房管理过程中,我们经常会碰到因一时疏忽而忘记了系统超级管理员密码的情况.由于事前没有制作密码重设盘,等发现遗忘密码无法登录时,便后悔莫及.计算机系统分区中没 ...
- 计算机可以配置端口号吗,如何设置打印机端口,详细教您设置电脑打印机端口...
在安装打印机时,提示手动配置打印机端口,原因是驱动安装程序没有扫描到打印机连接电脑的端口,那么如何设置电脑打印机端口呢?这是很多用户都没有操作过的,为此,小编教大家设置打印机端口的操作. 近期网友提出 ...
- 一步步教你轻松学关联规则Apriori算法
一步步教你轻松学关联规则Apriori算法 (白宁超 2018年10月22日09:51:05) 摘要:先验算法(Apriori Algorithm)是关联规则学习的经典算法之一,常常应用在商业等诸多领 ...
- 一步步教你轻松学逻辑回归模型算法
一步步教你轻松学逻辑回归模型算法 ( 白宁超2018年9月6日15: 01:20) 导读:逻辑回归(Logistic regression)即逻辑模型,属于常见的一种分类算法.本文将从理论介绍开始,搞 ...
- 教你轻松拿下百度音乐播放器mp3地址
教你轻松拿下百度音乐播放器mp3地址----ldfu2010 如果你想做一个类似百度或谷歌或QQ音乐那样的flash播放器,你最需要最重要的事情是什么?播放器什么做?我觉得应该不是,而是你的音乐mp3 ...
- 一步步教你轻松学朴素贝叶斯模型算法理论篇1
一步步教你轻松学朴素贝叶斯模型理论篇1 (白宁超2018年9月3日17:51:32) 导读:朴素贝叶斯模型是机器学习常用的模型算法之一,其在文本分类方面简单易行,且取得不错的分类效果.所以很受欢迎,对 ...
最新文章
- windows 技术篇-判断某个ip地址相对于自己的主机是内网ip还是外网ip实例演示
- 经典设计模式——策略模式
- .Net Core功能开关实战
- Java:检查器框架
- [Leetcode 376]摇摆序列 Wiggle Subsequence
- Linux监控工具介绍系列——smem
- 77岁“核弹老人”,前后半生都令人动容!
- 计算机网络中流的定义,计算机网络的基本概念-Read.PPT
- php 修改最大上传,php 修改上传文件大小限制实例详解
- 《linux内核完全注释》读书笔记 2
- 朋友,谁会Symbian S40 Symbian S60 v3/v5 Android?
- 【PDF下载】大数据峰会之地产大数据趋势与应用实践
- 国家虚拟仿真实验教学项目共享平台(实验空间)PHP SDK
- Ubuntu20.04下载安装UltraEdit(高级文本编辑器)
- AutoIT:界面与自动化操作结合来简化日常劳动: .Net Reactor验证License,设置License,创建License,截图AutoIt自动化实现。(七)...
- 代码揭秘:从c/c++的角度探秘计算机系统,【C++】[代码揭秘:从C/C的角度探秘计算机系统]左飞.pdf...
- 二进制,十进制,十六进制相互转换(小白友好)
- 三年级计算机帮助我们学本领,三年级学本领100字作文
- IT 路,梦里思路长。
- 《笼中鸟——精神病人的生存现状》观后的一点思考