Debugging react-native steps with the simulator (Andro)

1. Build the react-native environment in the CMD interface: refer to Https://reactnative.cn/docs/0.51/getting-started.html#content

(1) npm install- g yarn react-native-cli

Install the Yarn command tool and the react-native command tool, yarn is a tool that Facebook offers to replace NPM, which accelerates the download of node modules.

React Native's command-line tools are used to perform tasks such as creating, initializing, updating projects, running packaged Services (packager), and so on.

(2) Yarn config set registry https://registry. NPMtaobao. org--global

Yarn Config set disturl https://npm. Taobao. Org/dist--global

To set a mirror source for yarn tools

2. Create a react-native project

(1) React-native init awesomeproject

Awesomeproject is a custom project name, note: Enter this command on the path you want, such as creating an item in the app folder.

　　　　　　

(2) CD Awesomeproject

Enter the project file and the device must be connected before running.

3. Install the simulator:

(1) You can download the night God Simulator or the Getaway simulator, you can also use Genymotion or Android-studio (these two are not introduced)

(2) Connection simulator:

Night God simulator adb connect 127.0.0.1:62001
Carefree simulator ADB Connect 127.0.0.1:21503

Note: There must be only one machine attached to the computer at the moment, whether it is an emulator or a real device!

(3) See if the connection is successful

ADB devices

What appears below indicates that the phone is connected successfully, and you can start the project now

　　　　　　

4. Open the React-native project

React-native run-android

5. A red screen will appear after entering the project:

Solution: Shake the phone, the emulator's right toolbar has a shake function, pop-up menu, select Dev Settings ---> Debug server host&port for device , in the Pop-up dialog box input 你电脑的IP：8081 , the computer's IP can be entered in cmd ipconfig view, IPv4 address ............: 192.168.2.777(This)

Click OK, then reload!

　　

6. The device needs to be restarted at this time.

Close the project process on the phone and then perform react-native run-android  a reboot in CMD. You're done now, and you can compile it in the App.js file inside the project.

7. Simply add the connection debugging of the real machine

(1) Open developer mode, set------"About mobile------" version number (more than a few times)

(2) Enter developer options----"Turn on USB debugging

(3) If your data cable is attached to the computer input:adb reverse tcp: 8081 tcp: 8081

(4) If you do not use the data cable connection, first make sure that your phone and the computer in the same LAN, and then shake the phone, pop-up menu, select Dev Settings ---> Debug server 　　　　　　host&port for device , enter in the popup dialog box 你电脑的IP：8081 , click OK, then reload!

(5) When running on the real machine may encounter white screen situation, please set----"Rights management to open the suspended window permissions

Debugging react-native steps with the simulator (Andro)