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 cookies操作集合
Apr 12 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
vue实现PC端分辨率适配操作
Aug 03 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中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php实现网站留言板功能
2015/11/04 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
python实现根据图标提取分类应用程序实例
2014/09/28 Python
python sys.argv[]用法实例详解
2018/05/25 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
python获取引用对象的个数方式
2019/12/20 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
python实现翻译word表格小程序
2020/02/27 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
单位委托书怎么写
2014/08/02 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python