ReactNative踩坑之配置调试端口的解决方法
ReactNative是一款流行的跨平台移动应用程序框架，但是在实际开发中，我们经常会遇到各种问题，例如配置调试端口的解决方法本篇文章旨在解决这个问题，并提供了一些有用的经验和技巧。
让我们来分析问题的根源。在Windows上配置环境时，'http://localhost:8081'被占用了，这导致了按照教程配置完环境最后到真机上还是刷不出来界面这个问题的出现。
解决这个问题的关键是找到一种方式来配置端口。PackageManager（包管理服务）在启动的时候可以配置端口的，使用以下命令react-native start --port 18081可以将包管理服务启动在端口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;}这段代码告诉我们，解决办法就是在Application初始化的时候讲这个值设置成我们自定义的就好了，类似SharedPreferences mPreferences = PreferenceManager.getDefaultSharedPreferences(applicationContext);mPreferences.put("debug_http_host", "localhost:18081");这段代码最好写在SoLoader.init(this, /* native exopackage */ false);调用之前，因为在windows上remote debug js的时候如果不写在前面似乎调试不起效果(调试的地址端口也变成了18081了)。
我们可以总结出以下几个重要的知识点：
1. 配置调试端口的解决方法是使用PackageManager（包管理服务）在启动的时候配置端口的。
2. 在真机上需要敲命令adb reverse tcp:18081 tcp:18081将手机的调试端口设置成与包管理服务一致的端口18081。
3. 在Application初始化的时候讲这个值设置成我们自定义的就好了，类似SharedPreferences mPreferences = PreferenceManager.getDefaultSharedPreferences(applicationContext);mPreferences.put("debug_http_host", "localhost:18081");。
4. 在Windows上remote debug js的时候，如果不写在SoLoader.init(this, /* native exopackage */ false);调用之前，似乎调试不起效果。
希望本篇文章能够对大家的学习有所帮助，也希望大家多多支持我们。
