Reference for this article: react-native Chinese official website
This article aims to introduce the environment construction and project construction and real machine debugging of android applications in the windows environment.
According to the official documentation, the dependencies that react-native must install are: Node, JDK and Android Studio .
Although you can use 任何编辑器to develop applications (write js code), but you still have to install Android Studio to get the tools and environment needed to compile Android applications.
1. For the download and installation suggestions of android studio, please refer to: Android Studio download and installation_Shen-Childe's blog-CSDN blog_android studio download and installation
2. Regarding the installation and download of node, it is recommended to use the nvm node version management tool to download and use it. You can refer to my other blog: nvm dynamically manages node version_F_cy's blog-CSDN blog_nvm View the installable version
The installed version of node should be 14 or above
3. To download jdk, just double-click the executable file to install it. The Baidu network disk address of the installation file:
Link: https://pan.baidu.com/s/19la9SR3-xES7-qADZjcQMQ
Extraction code: hd91
After the jdk installation is complete, configure the advanced system settings of the system as follows:
JAVA_HOME
C:\Program Files\Java\jdk-11.0.11 //The path here is the path when you installed jdk
%JAVA_HOME%\bin
After the configuration is complete, open the command window, enter java -version and the following code appears, and the jdk installation is complete.
After following the android installation tutorial, the next step is to install the component configuration required by react-native
at last:
So far the android installation configuration is complete
Finally, build the reaact-native project:
Here only the construction methods of the two projects are shown. For details, please refer to the official documentation.
Ordinary project construction: npx react-native init AwesomeProject
ts template project build: npx react-native init AwesomeTSProject --template react-native-template-typescript
Just wait patiently after executing the command.
After the project is built, you can use android studio to open the android file in the root directory and start the mobile phone emulator
After the emulator is started, enter the following command to check whether the device is connected properly. If the following device appears, the connection is successful.
adb devices
Then execute the command in the project root directory
yarn android or npm run android
Wait for the execution to complete and you will see the following interface of the emulator,
If you want to debug on a real device, you first need to turn off the mobile phone simulator. react-native can only connect to one device at a time.
Connect the phone with a data cable, turn on the developer debugging mode, and repeat
After the physical device is successfully connected, execute yarn android again in the project root directory, and wait for react-native to install the app on the phone. After the installation is complete, you can view the app on the phone
