Solution to the ReactNative configuring debug port

This article introduces the solution to the ReactNative configuration debug port. Share it with everyone, and also leave a note for yourself.

The problem is this: because the company's machine has installed security software, http://localhost:8081 is occupied. (It's really not easy to configure the environment on Windows, and the last step is to be cheated by the company's environment)

Therefore, after configuring the environment according to the tutorial, the interface cannot be flashed on the real machine.

So have we given up like that? Of course not, otherwise it would be in vain

Analysis problem: The port is occupied, so we can change the port. So we checked various information and found that the PackageManager (package management service) can configure the port when it is started. The following commands

react-native start --port 18081

In this way, the package management service launched by Launch is on port 18081. Clicking localhost:18081 on Chrome magically displays the ReactNative interface, which means it is normal.

Then you need to type this command on the real machine

adb reverse tcp:18081 tcp:18081

This command will set the debug port of the phone to port 18081 that is consistent with the package management service

Then I ran the program on the real machine, but the result still couldn't be displayed. Is there any inexplicable sadness?

When the information was not found, I started to look through the ReactAndroid source code. After analysis, I finally found such a critical code

public String getDebugServerHost() {
// Check host setting first. If empty try to detect emulator type and use default
// hostname for those
String hostFromSettings = (PREFS_DEBUG_SERVER_HOST_KEY, null);

if (!(hostFromSettings)) {
 return (hostFromSettings);
}

String host = ();

if ((AndroidInfoHelpers.DEVICE_LOCALHOST)) {
 (
  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, it turns out that I read the value PREFS_DEBUG_SERVER_HOST_KEY from SharedPreference. If it is empty, use the function () to return the value (that is, loacalhost:8081)

Then the solution has surfaced. You just need to set this value to our custom one when the Application is initialized, just like

SharedPreferences mPreferences = (applicationContext);
("debug_http_host", "localhost:18081");

This code is best written before (this, /* native exopackage */ false); because if it is not written in front of it on Windows, it seems that debugging cannot be effective (the debugging address port has also become 18081)

If you write it at the end, when you can’t find the information to solve the problem, you can start rolling up your sleeves and reading the code! ! !

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.