ReactNative step-by-step solution for configuring debugging ports, reactnative

ReactNative step-by-step solution for configuring debugging ports, reactnative

This article describes how to configure the debugging port for ReactNative.

The problem is that http: // localhost: 8081 is occupied because the company's machine has installed security software. (It is really difficult to configure the environment on windows. The last step is still stuck in the company environment)

As a result, after the environment is configured according to the tutorial, the page still cannot be refreshed on the real machine.

So we just gave up? Of course not. Otherwise, I will be busy.

Analysis Problem: If the port is occupied, we can just change the port. As a result, we found that PackageManager (PackageManager) can be configured when it is started. The following command

react-native start --port 18081

In this way, the package management service that comes up with Launch is on port 18081, And the localhost: 18081 magic shows the ReactNative interface on Chrome, indicating that it is normal.

Next, you need to run this command on the real machine.

adb reverse tcp:18081 tcp:18081

This command sets the debug port of the mobile phone to port 18081 consistent with the package management service.

Then I ran the program again on the real machine, and the result still could not be displayed. Is there any inexplicable sadness?

If you cannot find any information, you can start to look at the ReactAndroid source code. After analysis, you can find such a key piece of code.

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;}

Good guy, I used to read the value PREFS_DEBUG_SERVER_HOST_KEY from SharedPreference. If it is null, the returned value (that is, loacalhost: 8081) of AndroidInfoHelpers. getServerHost () is used)

Then the solution will pop up. You just need to set this value to our custom value during Application initialization, just like

SharedPreferences mPreferences = PreferenceManager.getDefaultSharedPreferences(applicationContext);mPreferences.put("debug_http_host", "localhost:18081");

This code is best written in SoLoader. init (this,/* native exopackage */false); before calling, it seems that debugging is ineffective if the remote debug js file is not written in front of it on windows (the address port for debugging has also changed to 18081)

At the end of the article, when you cannot find any information to solve the problem, you can start to pull up your sleeves and read the code !!!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.