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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php session 错误
2009/05/21 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php实现encode64编码类实例
2015/03/24 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
简述php环境搭建与配置
2016/12/05 PHP
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Python爬虫实战之12306抢票开源
2019/01/24 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Python Merge函数原理及用法解析
2020/09/16 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
幼儿园毕业教师感言
2014/02/21 职场文书
财务总监岗位职责
2014/03/07 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
Java spring定时任务详解
2021/10/05 Java/Android