ReactNative踩坑之配置调试端口的解决方法


Posted in Javascript onJuly 28, 2017

本文介绍了ReactNative踩坑之配置调试端口的解决方法,分享大家,顺便也给自己留个笔记

问题是这样的,由于公司的机器安装了安全软件,http://localhost:8081被占用了。(windows上配置环境真不易,最后一步还是被公司环境坑了)

所以导致按照教程配置完环境最后到真机上还是刷不出来界面

那么我们就这么放弃了吗?当然不,不然就白忙活了

分析问题:端口被占用,那我们换一个端口不就行啦,于是乎各种查阅资料,发现PackageManager(包管理服务)在启动的时候是可以配置端口的.如下命令

react-native start --port 18081

这样Launch起来的包管理服务就在端口18081上了,在Chrome上敲localhost:18081神奇的显示了ReactNative的相关界面,说明正常了。

接着在真机上需要敲这个命令

adb reverse tcp:18081 tcp:18081

这个命令会将手机的调试端口设置成与包管理服务一致的端口18081

然后我在真机上跑了一遍程序,结果还是显示不出来。莫名的伤感有没有

在各种找不到资料的情况下,开始翻看ReactAndroid源码,经过分析最后找到这么一段关键的代码

public String getDebugServerHost() {
// Check host setting first. If empty try to detect emulator type and use default
// hostname for those
String hostFromSettings = mPreferences.getString(PREFS_DEBUG_SERVER_HOST_KEY, null);

if (!TextUtils.isEmpty(hostFromSettings)) {
 return Assertions.assertNotNull(hostFromSettings);
}

String host = AndroidInfoHelpers.getServerHost();

if (host.equals(AndroidInfoHelpers.DEVICE_LOCALHOST)) {
 FLog.w(
  TAG,
  "You seem to be running on device. Run 'adb reverse tcp:8081 tcp:8081' " +
   "to forward the debug server's port to the device.");
}

return host;
}

好家伙,原来是从SharedPreference中先读了PREFS_DEBUG_SERVER_HOST_KEY这个值,如果为空则用AndroidInfoHelpers.getServerHost()这个函数返回值(也就是loacalhost:8081)

那么解决办法就浮出水面了,只需要在Application初始化的时候讲这个值设置成我们自定义的就好了,类似

SharedPreferences mPreferences = PreferenceManager.getDefaultSharedPreferences(applicationContext);
mPreferences.put("debug_http_host", "localhost:18081");

这段代码最好写在SoLoader.init(this, /* native exopackage */ false);调用之前,因为在windows上remote debug js的时候如果不写在前面似乎调试不起效果(调试的地址端口也变成了18081了)

写在最后的话,在找不到资料解决问题的时候,可以开始撸起袖子看代码了!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
原生js滑动轮播封装
Jul 31 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 #Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 #Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 #Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 #jQuery
完美实现js拖拽效果 return false用法详解
Jul 28 #Javascript
webpack 2的react开发配置实例代码
Jul 28 #Javascript
基于AngularJS实现表单验证功能
Jul 28 #Javascript
You might like
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
python3访问sina首页中文的处理方法
2014/02/24 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
Shell如何接收变量输入
2016/08/06 面试题
销售人员个人求职信
2013/09/26 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
化妆品活动策划方案
2014/05/23 职场文书
校园文明标语
2014/06/13 职场文书
文明好少年事迹材料
2014/08/19 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang