教你轻松修改React Native端口
告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。
当我们运行一个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端口还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。 另外也可以关注我的新浪微博@CrazyCodeBoy,或者关注我的Github来获取更多有关React Native开发的技术干货。
告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。
如果,大家在开发原生模块中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。 另外也可以关注我的新浪微博
,或者关注我的Github
来获取更多有关React Native开发的技术干货
。
推荐学习:视频教程《React Native开发跨平台GitHub App》
参考
- Open vSwitch源码解析之基于VxLAN实现NSH解析功能
- Spring Cloud自定义Hystrix请求命令
- JavaScript面试问题:事件委托和this
- Spring Cloud中的断路器Hystrix
- js的隐含参数(arguments,callee,caller)使用方法
- Spring Cloud中的负载均衡策略
- Spring Cloud中负载均衡器概览
- 没有event loop的PHP
- RestTemplate的逆袭之路,从发送请求到负载均衡
- limit_area_cirle
- Spring RestTemplate中几种常见的请求方式
- 什么是客户端负载均衡
- jQuery 升级踩坑大全
- Eureka中的核心概念
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Django后台管理界面修改(代码修改)
- OpsnSSH抓包分析 | SSH协议分析
- 搭建简易的物联网服务端和客户端-第三次增补(二十二)
- ReentrantLock源码解析
- Nodejs连接PostgreSQL
- ReentrantReadWriteLock源码解析
- LockSupport源码解析
- Nodejs定时自动截图并发送给邮箱
- StampedLock源码解析
- 手植这棵自顶向下伸展树,何时亭亭如盖呢?
- ConcurrentLinkedDeque源码解析
- 给初学者的Gulp教程(译)
- 伸展树,据说比AVL树要简单一些
- CheckStyle学习笔记
- ArrayBlockingQueue源码解析