React-native android App project construction

introduce

official document

build process

1. Configure the java environment
Note: Make sure that the java version is higher than version 11.
2. Download the AndroidStudio software
directly on the official website

3. Create a new project folder, try to avoid the Chinese path
4. Use npx to build the project

npx react-native init AwesomeProject

We can see the following folders.
insert image description here
At this time, don’t rush to run the project.
5. Open the android folder of the above project with AndroidStudio.
At this time, AndroidStudio will automatically (build) download some packages. After completion,
insert image description here
6. Connect to the real machine
here I The real machine simulation is used (connect the mobile phone to the computer with a data cable, turn on the usb debugging on the mobile phone, agree to debug, and generally need to use the mobile phone developer mode)
7. Start the simulation

npx react-native run-android

There will be a node.js bullet box.
insert image description here
It is not over yet. The mobile phone will receive an installation package. After the mobile phone is installed and loaded
insert image description here

At this point, the real machine simulation is over.
After you write the code later, this will be automatically packaged and automatically updated on the phone. When you connect with your mobile phone later, as long as your software has not been uninstalled, you don't need to install it again.

debugging

Debugging with Google Chrome

Disadvantages: You can't view the label structure, you can't directly (can be solved) view the network request
Note: If you use the android real machine simulation, you can shake the phone to see the menu
insert image description here

Just click Debug, and there are other shortcut keys that you can search online,
so you can see the console output

Use the react-native-debugger tool


Select the corresponding version from the download address (github)
insert image description here
, unzip it, and click to use it directly

Guess you like

Origin blog.csdn.net/qq_45859670/article/details/126167140