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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
Sort()函数的多种用法
Mar 20 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 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 操作excel文件的方法小结
2009/12/31 PHP
php组合排序简单实现方法
2016/10/15 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
Python 字符串换行的多种方式
2018/09/06 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
在django view中给form传入参数的例子
2019/07/19 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
django修改models重建数据库的操作
2020/03/31 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
Java面向对象面试题
2016/12/26 面试题
丑小鸭教学反思
2014/02/03 职场文书
简历中的自我评价范文
2014/02/05 职场文书
中学生演讲稿
2014/04/26 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
学生会部长竞选稿
2015/11/19 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
详解Python为什么不用设计模式
2021/06/24 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers