React-Native introductory tutorial (a): Environment and build Hello World

I, on the React Native

1. 什么是React Native?

React Native (RN) is set for developing facebook open cross-art mobile terminal platform frame of App. RN for the development of native App can solve performance issues and rights-based Web application development faces. And between React and RN, RN development process does not require the preparation of div and span tags, and to view and use the text component, and have permission to call the native tool,
which is similar to Cordova, however, Cordova is running webview by calling native API to obtain the native level of functionality, and RN components can be rendered directly into native components that can provide a true native experience for mobile applications, and Cordova application in the face of rolling such a high intensity of UI interaction scenarios, may crash .

2. 相较于原生开的，React Native开发的优势？

Traditional development pain points:

• The scarcity of personnel, the development of a terminal app for different platforms need points
• High development costs, android and IOS need two teams, small teams for friendly
• Code reuse rate: not common different side code
• You can not dynamically update, each update needs to upload a new package respectively to the application market, but also worried that rejected the audit and other issues

React Native advantages:

• Cross-platform, low-input high-return, high-performance (much higher than the H5 + WebView way), supports dynamic updates.
• Only a dual development of low cost (only one end), code reuse rate,

Second, build environment

In React Native official website you can see there are two sets of scaffolding tools: expo-cli(sandbox environment) and react-native-cli(complete environment), expo requirements of the network environment is relatively high, many from foreign dependence, not recommended for home users.

• Installation Guide, the official website made it very clear: Installation depends

2.1 Installation depends

• Precautions:
  1. Node version must be> = 10, Python version must 2.x (not supported 3.x), and the JDK must be1.8

# 使用chocolate快速安装
choco install -y nodejs.install python2 jdk8

• chocolate is a windows-based platform package management tool (like a software management application)

1. Node安装

For installation recommendations Node directly to the official website to download the installation package to install, you can also use chocolate to install. Official website

2. Python 2.x

Download the official website address , pay attention to selecting 2.x versions (ie 2.7.8)

3. jdk8

download link

2.2 Android development environment

1. 安装Android Studio

First, download and install the Studio Android , domestic users may not be able to open official links can be provided by google developer download site . Installation screen, select "Custom" option, make sure the following items:

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM) (AMD processors see here)
• Android Virtual Device

2. 安装Android SDK

Android Studio will by default install the latest version of the Android SDK. RN compiled applications require android 9, so it is necessary after installation of Android Studio by SDK Managerselecting installed versions of SDK.
You can find in Android Studio SDK Manager of the Welcome screen. Click the "Configure", then you can see "SDK Manager".

Select "SDK Platforms" in the SDK Manager tab, then check "Show Package Details" in the lower right corner. Expand Android 9 (Pie) option, make sure the following components (you must use reaffirm stable circumvention tools, or may not see this interface):

• Android SDK Platform 28
• Intel x86 Atom_64 System Image (official emulator image file, using the unofficial simulator not need to install this component)

Then click "SDK Tools" tab, the same hook in the bottom right corner of the "Show Package Details". Expand the "Android SDK Build-Tools" option, make sure the version React Native necessary 28.0.3. You can install multiple other versions at the same time.

Finally, click "Apply" to download and install these components.

3. 配置 ANDROID_HOME 环境变量

Open 控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建, create a file called ANDROID_HOMEenvironment variables (system or user variables are available), points to the directory where your Android SDK

4. 把 platform-tools 目录添加到环境变量 Path 中

Editing the Path environment variable, pointing to the new address Sdk \ platform-tools of

Third, the initialization of a new project

npx react-native init myApp

After creating myApp can see through react-native-cli, which generates the following directories:

• __test__: Case testing the application file for the project
• android: Application for the android compiled
• ios: Ios file is compiled after
• node_modules: Project Dependencies
• 其它如App.js: That is, we want to modify the application file

The use of Android Studio up and running

Here, you can use the real machine can also be used directly from Android Studio comes with the emulator to run the application, the simulator here to prevail.

1. File--> Open-->选择myApp下的android目录
   
   At this point, IDE will recognize and a series of compilation, after waiting for a while, you can click on the run to try.
   

Note: For me, there is a problem encountered for the first time use: Cannot find AVD system path. Please define ANDROID_SDK_ROOTbecause Android Studio simulator comes with mirror is not installed, so it should first delete, and then through Tools--> AVD Manager-->Create Virtual Deviceto the new equipment, the options here is Nexus5, all the way to Next and after the successful installation Finished,

• Start the emulator
  
• After the startup is complete, run App
  

Note 2: In the first run, may appear red screen error as follows:

At this point you need to npx react-native run-androidbe compiled project

Note 3: Since the new version of React Native code is added to the initial wording of section TS, but the environment is not the case, being given support for TS in the simulator, Syntax Error.... no stackwhere the need for myApp / App.js modify first application start running

• After modification, the basic operation again no problem, where the first application even if successful run up, you can make changes after App.js to see changes in the application