ReactNative踩坑之配置調(diào)試端口的解決方法
本文介紹了ReactNative踩坑之配置調(diào)試端口的解決方法,分享大家,順便也給自己留個(gè)筆記
問(wèn)題是這樣的,由于公司的機(jī)器安裝了安全軟件,http://localhost:8081被占用了。(windows上配置環(huán)境真不易,最后一步還是被公司環(huán)境坑了)
所以導(dǎo)致按照教程配置完環(huán)境最后到真機(jī)上還是刷不出來(lái)界面
那么我們就這么放棄了嗎?當(dāng)然不,不然就白忙活了
分析問(wèn)題:端口被占用,那我們換一個(gè)端口不就行啦,于是乎各種查閱資料,發(fā)現(xiàn)PackageManager(包管理服務(wù))在啟動(dòng)的時(shí)候是可以配置端口的.如下命令
react-native start --port 18081
這樣Launch起來(lái)的包管理服務(wù)就在端口18081上了,在Chrome上敲localhost:18081神奇的顯示了ReactNative的相關(guān)界面,說(shuō)明正常了。
接著在真機(jī)上需要敲這個(gè)命令
adb reverse tcp:18081 tcp:18081
這個(gè)命令會(huì)將手機(jī)的調(diào)試端口設(shè)置成與包管理服務(wù)一致的端口18081
然后我在真機(jī)上跑了一遍程序,結(jié)果還是顯示不出來(lái)。莫名的傷感有沒(méi)有
在各種找不到資料的情況下,開始翻看ReactAndroid源碼,經(jīng)過(guò)分析最后找到這么一段關(guān)鍵的代碼
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; }
好家伙,原來(lái)是從SharedPreference中先讀了PREFS_DEBUG_SERVER_HOST_KEY這個(gè)值,如果為空則用AndroidInfoHelpers.getServerHost()這個(gè)函數(shù)返回值(也就是loacalhost:8081)
那么解決辦法就浮出水面了,只需要在Application初始化的時(shí)候講這個(gè)值設(shè)置成我們自定義的就好了,類似
SharedPreferences mPreferences = PreferenceManager.getDefaultSharedPreferences(applicationContext); mPreferences.put("debug_http_host", "localhost:18081");
這段代碼最好寫在SoLoader.init(this, /* native exopackage */ false);調(diào)用之前,因?yàn)樵趙indows上remote debug js的時(shí)候如果不寫在前面似乎調(diào)試不起效果(調(diào)試的地址端口也變成了18081了)
寫在最后的話,在找不到資料解決問(wèn)題的時(shí)候,可以開始擼起袖子看代碼了!??!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
react-router-dom6(對(duì)比?router5)快速入門指南
這篇文章主要介紹了快速上手react-router-dom6(對(duì)比?router5),通過(guò)本文學(xué)習(xí)最新的react-router-dom?v6版本的路由知識(shí),并且會(huì)與v5老版本進(jìn)行一些對(duì)比,需要的朋友可以參考下2022-08-08React實(shí)現(xiàn)復(fù)雜搜索表單的展開收起功能
本節(jié)對(duì)于需要展開收起效果的查詢表單進(jìn)行概述,主要涉及前端樣式知識(shí)。對(duì)React實(shí)現(xiàn)復(fù)雜搜索表單的展開-收起功能感興趣的朋友一起看看吧2021-09-09React項(xiàng)目中使用zustand狀態(tài)管理的實(shí)現(xiàn)
zustand是一個(gè)用于狀態(tài)管理的小巧而強(qiáng)大的庫(kù),本文主要介紹了React項(xiàng)目中使用zustand狀態(tài)管理的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10Redux?Toolkit的基本使用示例詳解(Redux工具包)
這篇文章主要介紹了Redux?Toolkit的基本使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12