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中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
PHP7新特性简述
Jun 11 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
为什么node.js不适合大型项目
Apr 28 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
索尼巴西商店:Sony巴西
2019/06/21 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
企业业务员岗位职责
2014/03/14 职场文书
综合实践活动总结
2014/05/05 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL