The preparatory work

  1. Node.js® is a JavaScript runtime based on the Chrome V8 engine. Download version v12 or later
  2. Install Homebrew first, refer to “Homebrew Installation and Use”.
  3. To install Watchman using Hombrew, see Installing Watchman.
  4. Yarn is a tool provided by Facebook to replace NPM. It speeds up the download and installation of Node modulesnpm install -g yarn
  5. To install the JDK, see “Installing Java Development Kit on macOS”
  6. If you’ve never worked on an Android development environment before, be prepared for the tedious process. Please read the following instructions carefully and strictly follow the documentation for configuration operations. For details, see the macOS Download and Install Android Studio.

Install the react – native – cli

  1. In the project directory you specify, enter the commandreact-native init AwesomeProject
  2. Continue to download
  3. Wait, wait, wait, wait, continue to download
  4. Continue to download
  5. Continue to download
  6. Continue to download
  7. Continue to download
  8. Continue to download
  9. Continue to download
  10. Continue to download
  11. Continue to download
  12. Continue to download
  13. The download is complete

Introduction to RN project directories

  • On access, open the AwesomeProject directory

  • Open AwesomeProject with VSCode, index.js is the entry file

Preparing Android Devices

You’ll need an Android device to run the React Native Android app. The device referred to here can be either a real machine or a simulator. All of our subsequent documentation does not distinguish between real machines and emulators unless otherwise specified. Android officially provides an emulator called Android Virtual Device (AVD).

The Android emulator is used here

You can use Android Studio to open the “Android” directory under your project, and then use the “AVD Manager” to view available virtual devices.

  1. Open an existing project
  2. Select the Android directory under the RN project
  3. Wait a moment
  4. Wait a moment
  5. If the website error, the probability is unstable science online, please solve
  8. Wait a moment
  9. A minute
  10. Six minutes
  11. Download details in the lower right corner
  14. If you have just installed Android Studio, you may need to create a virtual appliance first and use the “AVD Manager” to view the available virtual appliances. You can go to AVD Manager in either of the following places
  15. Click “Create Virtual Device…”
  16. Then select the type of device you want and click “Next”
  17. Then select Q API Level 29 Image and click Download
  19. Click Finish when the download is complete
  20. Click Next
  21. Click Finish
  23. This shows the emulator we just installed, now you should be able to click the green triangle button next to the virtual device to launch it, and once it’s up we can try running the application
  27. If you report an error, don’t panic

Compile and run the React Native application

  1. Make sure you run the emulator or connect to the real machine first, and then run it in your project directoryyarn androidoryarn react-native run-android
  2. If there are no problems with the configuration, you should see the application automatically installed and running on the device. Note that the first run requires downloading a large number of compile dependencies, which can take tens of minutes. This process relies heavily on a stable wall climbing tool, otherwise it will frequently experience connection timeouts and disconnections, resulting in no operation
  5. Go back to VSCode and try to modify the code in the app.js page