In this paper, I recorded the pit (RN) I stepped on when building the React-Native project and the problems I encountered when running RN project on the Android real machine, for your reference.

Initialize theRNproject

Run the react-native init [your project name] command to initialize an RN project locally

Open the localRNservice

NPM install is not required for CD entry, since this step is already done by React-Native. Run the react-native run-ios or react-native run-Android to start RN’s Android and ios local servers, respectively.

When I run the react-native run-android command, the terminal will start a Node service process by default. Note: Do not close either window during development, otherwise the local service in the JS environment will break.

windowsenvironmentAndroid StudioThe installation

While you can use any editor to develop your app (write JS code), you still have to install Android Studio to get the tools and environment you need to build your Android app.

Note: About Android Studio, you can go to the official website, or you can go to the local community to download. If you go to the official website to download, domestic users must have a stable tool to climb over the wall, otherwise during the download, installation, configuration process will encounter link timeout or disconnection, unable to proceed with the development work.

Start the installation


The installationAndroid Virtual Device

Note: Select The Android Virtual Device to install the Android Virtual Device. Otherwise, debugging will not be enabled on either the real machine or emulator.


Installation directory selection

Define the installation directory, there is nothing to say here, but be careful not to put it on a C:\ disk, because the Android SDK is very memory hungry.

Android Studio


Start theAndroid StudiobuildAndroidSimulator operating environment

SDK
SDK
Android Virtual Device
Android Studio
RN
android

Starting a project for the first time can take a long time. Android Studio has a progress bar and Event log in the lower right corner, and a terminal in the lower left corner that prints information about package installation and Tasks Run. Setup may fail for the first time, manually click Install missing Platforms to Install missing files

After various dependencies and compilation are completed, the run button in the Virtual Device control bar in the upper right corner will be highlighted. Select APP and click the run button on the right, and the Virtual Device selection box will appear. At this time, connect the real computer with data cable and set usb debugging data on the real computer. If the device is successfully connected, the model and version are displayed.

Note: It is not recommended to use the emulator provided by Android Studio because it is difficult to set up and eats up memory. In general, running Android Studio and emulator at the same time will eat up almost all of the CPU.

RN
event log


Start theadbservice

The JavaScript native service is started, the Android Studio environment is set up, and you need to run the ADB command to open the test port

Android Debug Bridge (ADB) is a tool in the Android SDK. You can use ADB to directly manage the Android emulator or real Android devices. ADB is a client-server program where the client is the computer you’re working on and the server is an Android device.

Remember where you installed the SDK after you installed Android Studio? Start the Windows terminal, go to the platform-tools folder in the SDK installation directory, and run adb reverse TCP :8081 TCP :8081 to specify the development port.

Note: before running adb command, you need to make sure that the Android real machine and the local service start on the same network segment, simply say the same router, otherwise the connection cannot be established!!


Real machine operationRN

All three machines need to start successfully at the same time:

  1. If the JS local service is successfully started, it is runningreact-native run-android
  2. Android StudioThe development device is started successfully
  3. adbPort configuration successful

When all environments are set up, Android will automatically install the development package of RN project and run it automatically. If the run is successful, the following initial interface will appear:


Real machine commissioningRN

At this point, the project is running, but how to debug? How do you call out the console on a real machine? Just shake the phone. Shake the phone and call up the console as follows:

  1. ReloadSwipe the entire app, killing the process and opening it again.
  2. Debug JS RemotelyRemotely open a JS debugging page on the PC browser and open the browserF12Call out the console, you can see various code running data, just like writewebviewProject time is the same. I haven’t found a good solution to this problem, however, when it comes to the real world.
  3. Enable Live Reload Enables automatic change refresh, and pureReloadThe difference is that you can refresh directly on the current page, not from the welcome page to enter again. andEnable Hot ReloadingThe difference is that the page can be re-executedJavaScriptCode, andEnable Hot ReloadingJust changing the style of the view layer does not re-execute the logic.
  4. Enable Hot ReloadingHot update, which is used when building pages to quickly see Ui effects
  5. I don’t know what to do with the last few, but for beginners, the above four functions are enough.


Finally, aboutRNSome guidelines for red screen error:

  1. Remember that the device and PC must be on the same network segment.
  2. The environment can’t get away. The most common mistake isJSLocal service is not up, i.ereact-native run-androidThe command is not run successfully, sometimes debugging error, the service will be closed by default, developers need to check the real-time enablednodeService Print Logs
  3. JavaScriptThere were problems with the code, all kinds of problems, package not found, variable undefined, tag not closed… This kind of case report error general service will not stop, is 500 error, general this kind of operation error, the error information positioning of the real machine is more accurate, it is good to check their corresponding.
  4. If you are usingRNSome of the ecological components such asreact-navigationNavigation, be sure to pay attention to version,3. *Version of the use and2. *It is slightly different. In this case, the error log will only indicate that there is a problem with the package, and some corresponding solutions will be provided. You can check the usage method of the document and update to the corresponding version.
  5. Sometimes there will be some inexplicable errors, may be a package compilation error, plug and unplug the device, go through the process again.


conclusion

The above are some of the pits I stepped in when I built the environment by myself. At present, RN’s community is not very good, many problems are not perfect, and many solutions still need to be summarized in the exploration.