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 应用类库代码
Jun 02 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
JSON相关知识汇总
Jul 03 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
vuejs指令详解
Feb 07 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
PM2自动部署代码步骤流程总结
Dec 10 Javascript
JavaScript对象原型链原理解析
Jan 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
Django model class Meta原理解析
2020/11/14 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
学习礼仪心得体会
2014/09/01 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
公司更名通知函
2015/04/24 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis