Windows Builds react-native development environment

First, the target platform windows+android

1. Required Software

python2+

Nodejs

Npm

2. Install the react-native command line

　　　　　　$ NPM install-g react-native-cli

3. Build an Android environment

(1) React native currently requires Android Studio2.0 or later, Android Studio requires Java development Kit [JDK] 8 (note that later versions are not supported)

(2) official web download Android studio, JDK Select Jdk-8u161-windows-x64.exe, the JDK has been upgraded to 10, remember that you can not choose more than 8 version

(3) The operation of the project requires an Android phone or simulator (self-Baidu, installation needs a large space)

(4) After the initial installation, you canSelect Custom path and components (all components are recommended to install to the D drive directory)

　　　　　　　　

(5) Installation complete Open as welcome to the lower right corner select Configure | SDK Manager

　　　　　　　　

In the SDK Platforms window, select Show Package Details , and then tick in,, Android 6.0 (Marshmallow) Google APIs Android SDK Platform 23 Intel x86 Atom System Image , Intel x86 Atom_64 System Image and Google APIs Intel x86 Atom_64 System Image . (Different devices may require the SDK Platfrom version is not the same, wait until the last time the error prompt to come back to install it)

　　　　　　　　

In the SDK Tools window, select and Show Package Details then tick in Android SDK Build Tools Android SDK Build-Tools 23.0.1 (must contain this version.) Of course, if other plugins need other versions, you can install more than one version at a time. Then check the bottom of the box Android Support Repository .

　　　　　　　　

(6) Configure environment variables in two steps ( not less )

First, add the path to the SDK

Advanced system Settings > Advanced > Environment variables (System variables s) > New >

Variable name: android_home

Variable Value: D:\USERS\ADMINISTRATOR\APPDATA\LOCAL\ANDROID\SDK (actual Sdk download location)

Second, add jdk8,platform-tools,tools environment variable path, (here is installed to the D disk, the actual situation depends on the installation directory)

　　　　　　　　　　　　D:\Program Files\java\jdk1.8.0_161\bin

D:\Users\Administrator\AppData\Local\Android\Sdk\tools

D:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools

Third, check whether the JDK installation was successful: $ javac-version

(7) Connect the phone

Open the Phone developer options: Settings More Settings "about mobile" software version number more than 7 consecutive clicks can open "developer Choice"

Turn on the phone USB debug: Settings More Settings developer options (generally at the bottom) developer options open, USB debug on

Phone connected to the computer: Automatic installation of drivers, such as failure, it is recommended to download mobile phone assistant or pea pod when connected to a mobile phone will install the driver, here use the Computer Butler tool to install the connection

　　　　　　　　　　Note: The first time the phone connected to the computer, the mobile phone first page will pop up the Debug dialog box, you need to determine the computer can be connected, such as missed tips, can be repeatedly connected to the phone

　　　　　　　　

　　　　　　　　　　

Last: Open the command line tool to detect if the phone is connected successfully to ADB devices, display the devices serial number as the connection is successful

　　　　　　　　　　

(8) Building the project

1. Initialize and install dependencies, such as relying on incomplete installation, first remove node_modules after the root directory re-cnpm install

　　　　　　　　　　

2. Start the project

$ react-native Run Android (first run required download Gradle dependency, decimal point indicates download progress, determined by network quality speed)

　　　　　　　　　　

　　　　　　　　　　

　　　　　　　　　　

Download to the end of the New Nodejs Server window (this window opens a server environment for the project, which can be run on localhost:8081), the app is automatically opened on the phone

　　　　　　　　　　

Apps on the phone

　　　　　　　　　　

4. Finally, use the development tool (as or webstorm), modify the code on the App.js, touch the menu key in the bottom left corner of the phone, click Reload to update the changes

　　　　

　　　　　　

　　　　

　　　　　　　　　　　　

　　　　　　　　　　

　　　　　　

Windows Builds react-native development environment