ReactNative踩坑之配置調試連接埠的解決方案，reactnative

ReactNative踩坑之配置調試連接埠的解決方案，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 thoseString 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了)

寫在最後的話，在找不到資料解決問題的時候，可以開始擼起袖子看代碼了！！！

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。