The first day of React-Native learning: building the environment

1. Official tutorial

I personally think that the best way to learn is to go to the official website to learn about environment construction and the use of basic components, instead of checking online at the beginning. The knowledge on the Internet is fragmented and needs to be assembled by yourself.
So it is recommended to go to the React Native Chinese website to build a learning environment: https://www.react-native.cn/docs/environment-setup
insert image description here The environment I use is Window and Android, and other environments need to be explored by yourself.
According to the official tutorial: Install Node, JDK and Android Studio
My version is:
Node v14.15.4
JDK 11
Android Studio Bumblebee

2. Problems encountered

After configuring the environment according to the official tutorial, I was about to flex my muscles, and the result. . . Wrong
insert image description here
question 1: cli.init is not a function
insert image description here 1. Delete react-native: npm uninstall -g react-native-cli
2. Reinstall: yarn add react-native --exact
3. Create a new project: react-native init project

Question 2: Report gradle compilation error
The higher version of gradle needs jdk 11 to compile, if you still use jdk 8, and you still have to change, um. . . . . . . . . . Think of other ways by yourself.
Here I change jdk to 11
insert image description here

Question 3: Report Unable to load script. Make sure you're either running a metro server
insert image description here
1. Execute the command

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

The index.android.bundle file will be generated
insert image description here
2. Run the project

npx react-native run-android

Question 4: How to run again
The first run, the command used, one of the following three commands

1、yarn android
2、yarn react-native run-android
3、npx react-native run-android

When you close the cmd window or unplug the USB cable, in short, the connection is disconnected. How to run the project again?
1. First associate the device

//多设备
adb -s 设备id reverse tcp:8081 tcp:8081
//单设备
adb reverse tcp:8081 tcp:8081

The device id is the id displayed by adb devices
insert image description here
2. Startup project

npx react-native start

3. May report the following questions

warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.

①Close the application occupying port 8081; ②Manually click to open the app on the mobile device;

Temporarily record these, and I will add it when I encounter other problems in the future. If you find any problems, you can leave a message in the comment area
insert image description here

Guess you like

Origin blog.csdn.net/xlk_1996/article/details/125596149