React Native scaffolding basic usage detailed explanation

Build the project

Execute the command line in the corresponding path: react-native init 項目名(the name cannot use special characters such as hyphens, and the naming can refer to the APP application name such as FaceBook)

react-native --v //View the version react-native init demo --version 0.48.0 //Install the specified version react-native init demo --verbose --version 0.48.0 //verbose is used to display the installation details during initialization, including what modules are installed and the progress npm view react-native versions //You can view all version information of react-native

Jump to the corresponding path and execute the corresponding mobile project:

cd project name react-native run-ios or react-native run-android

If normal, the operation effect is as follows:

RN debugging tips

Developer Menu

Developer Menu is a developer menu customized by React Native for developers to help developers debug React Native applications.

Open the Developer Menu Android emulator on the emulator:

You can quickly open the Developer Menu using Command⌘ + M shortcut. It can also be opened using the menu key on the simulator.

iOS Simulator:

You can quickly open the Developer Menu using Command⌘ + D shortcut.

Reload

Refresh the page, the shortcut key is command + R.

Note: The refresh feature will only work if you modify the JavaScript file. If you add new files or modify the Native code, you need to recompile the application using Xcode .

Debug JS Remotely

This feature allows developers to debug applications in Chrome in the same way as they debug web applications.

change bundle location

Change the packaged address

toggle inspector

View component styles in the simulator. Not very useful.

disable fast refresh

Disable fast refresh

Show Perf Monitor

When this feature is enabled, a monitoring window will be displayed, showing real-time memory usage, UI and JavaScript FPS and other information. Helps us debug performance issues.

Errors and Warnings

In development mode, the Errors and Warnings of the js part will be printed directly on the phone or simulator screen, displayed in red and yellow screens. .

Errors

Errors that occur when the React Native program is running will be displayed directly on the screen, displayed with a red background, and the error message will be printed. You can also trigger Errors manually via console.error() .

Warnings

Warnings that appear when the React Native program is running will also be displayed directly on the screen, displayed with a yellow background, and warning messages will be printed out. You can also trigger Warnings manually via console.warn() . You can also manually disable the display of Warnings by console.disableYellowBox = true , or ignore the corresponding Warning by console.ignoredYellowBox = ['Warning: ...'];

Chrome Developer Tools

Step 1: Start remote debugging

Click "Debug JS Remotely" under the Developer Menu to start the JS remote debugging function. Chrome will be opened and a "http://localhost:8081/debugger-ui." Tab page will be created.

Step 2: Open Chrome Developer Tools

Open the developer tools under the "http://localhost:8081/debugger-ui." tab. Open the Chrome menu -> Select More Tools -> Select Developer Tools. You can also open the developer tools using the shortcut keys (Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows).

When some "inexplicable" problems and errors occur during breakpoint debugging, common solutions

The inexplicable here means that the code was still running normally at the last moment, and it became popular without modification:

1. Refresh! refresh! refresh!

2. Re-use the react-native run-xxx command to start the App

3. Delete the App, shut down the local server, and clear the local cache

yarn: clear cache yarn cache clean

npm: Clear the cache npm cache clean -f

This is the end of this article about the basic use of React Native scaffolding. For more relevant React Native scaffolding content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!