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图像处理—仿射变换深度理解
Jan 16 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
js实现继承的5种方式
Dec 01 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
简单了解JS打开url的方法
Feb 21 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来实现网络服务
2009/09/15 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
深入php多态的实现详解
2013/06/09 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
销售员自我评价怎么写
2013/09/19 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
安全生产先进个人总结
2015/02/15 职场文书
大学生团日活动总结
2015/05/06 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server