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 (三) 管理jQuery包装集
Feb 23 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
java必学必会之static关键字
Dec 03 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
详解js中==与===的区别
Jan 08 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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
对盗链说再见...
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
PHP中的use关键字概述
2014/07/23 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
Python fileinput模块使用介绍
2014/11/30 Python
python之Character string(实例讲解)
2017/09/25 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
初三班主任寄语大全
2014/04/04 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
三方协议书
2015/01/27 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
六年级作文之自救
2019/12/19 职场文书