ReactNative踩坑之配置调试端口的解决方法
本文介绍了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了)
写在最后的话，在找不到资料解决问题的时候，可以开始撸起袖子看代码了！！！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了React从Class方式转Hooks详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-09-09
这篇文章主要介绍了React之useEffect缺少依赖警告问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
React钩子函数之useDeferredValue的基本使用示例详解
useDeferredValue是React 18中非常有用的一个钩子函数，它可以帮助我们优化渲染性能，并让UI更加流畅，如果你还没有尝试过它，不妨在你的下一个React项目中试一试，这篇文章主要介绍了React钩子函数之useDeferredValue的基本使用,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了React 使用Effect Hook的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要为大家详细介绍了React通过hook封装表格常用功能的使用,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2023-12-12
全栈轻量级搭配之Remix Prisma Sqlite使用分析
这篇文章主要为大家介绍了全栈轻量级搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了react装饰器与高阶组件及简单样式修改的操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
这篇文章主要介绍了React事件机制源码解析的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要为大家介绍了React classnames原理及测试用例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
本文给大家分享React鼠标多选功能，通过导入组件直接包裹已经设计好的列表即可，操作简单方便,对React鼠标多选相关知识感兴趣的朋友一起看看吧2021-05-05
最新评论