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
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
question 1: cli.init is not a function
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
Question 3: Report Unable to load script. Make sure you're either running a metro server
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
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
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