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 相关文章推荐
深入理解Javascript闭包 新手版
Dec 28 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
JSON的parse()方法介绍
Jan 31 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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
php不写闭合标签的好处
2014/03/04 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
2016/08/16 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python实现中文分词FMM算法实例
2015/07/10 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
软件测试工程师结构化面试题库
2016/11/23 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
《泉水》教学反思
2014/04/11 职场文书
汉字听写大会观后感
2015/06/12 职场文书
Go timer如何调度
2021/06/09 Golang