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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
vue项目中锚点定位替代方式
Nov 13 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
AJAX的使用方法详解
2017/04/29 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
几种tab切换详解
2017/02/03 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
Vue中props的使用详解
2018/06/15 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
详解django中url路由配置及渲染方式
2019/02/25 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python logging设置和logger解析
2019/08/28 Python
python 字符串常用函数详解
2019/09/11 Python
python实现局域网内实时通信代码
2019/12/22 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
商学院大学生求职的自我评价
2014/03/12 职场文书
团队精神口号
2014/06/06 职场文书
检讨书范文
2019/04/16 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫