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 相关文章推荐
js中判断文本框是否为空的两种方法
Jul 31 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
原生js实现日期联动
Jan 12 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
vue组件name的作用小结
May 23 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 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
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP图片加水印实现方法
2016/05/06 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
python脚本爬取字体文件的实现方法
2017/04/29 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python实现石头剪刀布小游戏
2021/01/20 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
报告会主持词
2014/04/02 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
国旗下演讲稿
2014/05/08 职场文书
申论倡议书范文
2014/05/13 职场文书
行政经理岗位职责
2015/04/15 职场文书
投资合作意向书范本
2015/05/08 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript