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正则表达式来格式化XML内容
Jul 04 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
ReactRouter的实现方法
Jan 25 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
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Python语言的面相对象编程方式初步学习
2016/03/12 Python
深入了解Django View(视图系统)
2019/07/23 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Python通过socketserver处理多个链接
2020/03/18 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
销售顾问岗位职责
2014/02/25 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
绿色校园广播稿
2014/10/13 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS