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.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python判断windows系统是32位还是64位的方法
2015/05/11 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
python 实现dict转json并保存文件
2019/12/05 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
python绘制汉诺塔
2021/03/01 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
心得体会范文
2014/01/04 职场文书
安全生产检查通报
2014/01/29 职场文书
结婚喜宴主持词
2014/03/14 职场文书
田径运动会通讯稿
2014/09/13 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Python sklearn分类决策树方法详解
2022/09/23 Python