[TOC]

Environmental installation

It is recommended to check the React Native Chinese website for details.

The development tools

The IDE is recommended to use VS Code, which is relatively lightweight. Install plug-ins whenever you want. Of course, React Native Tools is the first choice for plug-ins.

Once YOU have VS Code installed, you can learn a few common shortcuts

Alt + Shift + F Format Ctrl + [Indent selected content Move left Ctrl +] Selected content Move right Ctrl + C Copy current line Ctrl + V Paste Copied content Ctrl + X Clip current line Ctrl + / Line comment Ctrl + F Find Ctrl + H replace Alt + Shift + A Block comment Alt + ↓ / ↑ Move A line up/down Ctrl + K Ctrl + 0 (Ctrl + K + 0) Global method Fold Ctrl + K Ctrl + K Ctrl + J (Ctrl + K + J) Global method Expand Ctrl + Shift + [Current block collapse Ctrl + Shift +] Current block expand

Debugging can use the simulator, Baidu search can display a lot of, I suggest you use the system simulator, download Android Studio will come with, conditional use the real machine

Common commands

Learn a few commonly used NPM commands before developing them

NPM list -g --depth 0 // Check the installed package NPM I'name' / npm install 'name'// Install NPM i-g'name'Adb shell input keyevent 82 // Open emulator debugging options from the command lineCopy the code

Import the project

Once the project is downloaded, NPM install // The installation project depends on NPM rm -rf node_modules // to forcibly delete the node_modules folder NPM rm -rf node_modules && NPM install // A combination of the twoCopy the code

Introduction of depend on

NPM install --save react-native webview // install react-native webview // install react-native webview // Therefore, link needs to be addedCopy the code

To understand

To install the environment, write **Hello, World! * * headphones

React syntax: React syntax: React syntax

React is based on ES6. Let’s use a simple tutorial to learn how to React

ECMAScrip 6 is a very complicated tutorial for you. It’s a very complicated tutorial for you. If you can’t finish it, don’t worry

At this time, because you do not know the application, do not recommend you to read the official website of the guide to progress and use

Get started

If you can’t find the video, it is recommended to read the comments in the tutorial. The video tutorial is only a few chapters and takes a week. You can follow the video to type it out.

Of course, because the video recording is relatively early, some controls may have been officially abandoned, the introduction method has changed, need to pay attention to when importing, in order to avoid detours, here is the import method of some abandoned controls, see the end of the article. At the same time, if the original tutorial project source code can not be normally installed, here is a copy of the latest code, you can refer to, click here, download and run to see the effect is, if you do not know how to install, please see the above import project introduction.

There will be other small demos in the project, which will be updated as time goes by.

To follow up

If you follow the tutorial has a complete knock, then congratulations, you will find that the specific and native development is almost the same, but the control name and the event is inconsistent, keep doing it will understand.

You may be curious about other react controls. Read the instructions on how to react and how to use them. Then try a simple project.

The project will often encounter a variety of control import and use problems, often reported errors, it is recommended to bear patience to look down, there are hints in the general log.

Node_modules is a reference to node_modules. Readme is a reference to node_modules, or read the source code to expose the properties and methods, or go to Github to find the library, see the author of the specific description. This will give you a better understanding of how controls are used, so as to avoid regurgitate.

The attached

NPM install @react-native community/async-storage --save react-native link NPM install react-native WebView --save react-native link React-native webview Navigator will introduce NPM install react-native-deprecated-custom-components --save PropTypes will introduce NPM install NPM install --save prop-types TabNavigator --save react-native tab-navigatorCopy the code