Build a Windows-based React Native development environment (for Android)

React native, which claims to be able to develop native apps for iOS and Android across platforms, is sure to become a trend. Just plan to develop a mobile app, and there is no corresponding development resources, decided to try their own groping.

The first step is to build the development environment, the following is the official documents, online information, combined with my actual operation of the summary:

First, the preparatory work

(1) Installing the Android SDK

According to react native official website instructions (http://facebook.github.io/react-native/docs/android-setup.html#content), the first need to install ANDROIDSDK, Configure the ANDROID_HOME environment variable to set the Android SDK.

First, install the latest version of the JDK.

If it is a 64-bit system, it is recommended that both X86 and X64 are installed.

Jdk:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html.

Configuring Java environment variables, setting Java_home=d:\program files\java\jdk1.8.0_77

Second, install the latest version of the Android SDK.

Android SDK official: https://developer.android.com/sdk/installing/index.html

Because Google is blocked in China, the above URL may not be able to play cards, can be downloaded from the following address:

Http://tools.android-studio.org/index.php/sdk

Then, configure the ANDROID_HOME environment variable. Add the Android tool to the PATH variable: D:\Program Files (x86) \android\android-sdk-windows\platform-tools;d:\programfiles (x86) \android\ Android-sdk-windows\tools

Finally, configure the Android SDK.

Under the installation directory, open SDK Manager.exe.

Click Install X packages ..., installation package.

As the foreign site, download speed may be very slow, you can click the menu "tools–> Options ..." Set up the agent.

Http Proxy Server:mirrors.opencas.cn

Http Proxy port:80

TIPS:

1, if the installation package fails, you can try several times, or replace the proxy address. More agents can view:http://www.cnblogs.com/zhuyp1015/p/4558978.html

2, X86 Simulator can be manually downloaded. The X86 emulator may continue to download unsuccessfully, as shown in:

can be downloaded directly from the Intel website: Https://software.intel.com/en-us/android/articles/intel-eula-x86-android-ice-cream-sandwich-bin

Download and place the temp directory in the SDK, such as: D:\ProgramFiles (x86) \android\android-sdk-windows\temp

(2) Installing the Android simulator

The Android SDK comes with an emulator that runs very slowly, even if the INTELX86 Simulator accelerator is installed, and runs slowly, as recommended by the official documentation, the Genymotion Android simulator is recommended.

1, download genymotion. : https://www.genymotion.com/download/. Genymotion is free for individual users and must be registered first before downloading.

2, install Genymotion. Since Genymotion is based on VirtualBox, installation will be installed VirtualBox

3. Create and use virtual machines. Click the Add button to create the virtual machine, and click the Start button to start the virtual machine.

TIPS:

1, may encounter genymotion user registration is not successful problem, because Genymotion website in foreign countries, the network is not very good, suggest another day try again.

2, when creating the virtual machine, you may encounter "the file is corrupt" error, you can manually download the VM files to resolve. The error is as follows:

Workaround:

Find the log file under Path C:\Users\Administrator\AppData\Local\Genymobile\genymotion.log, open the file, you can see the download log address, copy directly to the browser to open the download

The downloaded file is put into the directory C:\Users\Administrator\AppData\Local\Genymobile\Genymotion\ova

3. If you cannot access the network after the virtual machine starts, you can resolve the bridge by setting the network connection in VirtualBox.

After you create the virtual machine with genymotion, the default network connection is Host-only, which is modified to bridge the network card, in the virtual machine, connected to wireless networks can access the extranet.

(3) Installing the node. JS Runtime Environment

1. Install Git from windows,:https://git-for-windows.github.io/

2, Python2.7.11 installation,: https://www.python.org/downloads/

3. Installing Visio Studio 2015 is relatively convenient because node. NET Framewok and the C + + runtime environment are required to install Visio Studio: https://download.microsoft.com/ Download/b/4/8/b4870509-05cb-447c-878f-2f80e4cb464c/vs2015.com_chs.iso

4, Installation node.js,:http://nodejs.cn/

TIPS:

1, Python version can only >=v2.5.0 & < 3.0.0., do not download the latest python3.5.1 version, or you will get an error when starting the React native project.

2. When you install Visio Studio, remember to install the C + + runtime environment-related components, or you will get an error when starting react native project.

Second, set reactnative

(1) Install REACT-NATIVE-CLI, react-native tool under command line

Open cmd Run to execute the following command:

$ NPM install-g react-native-cli

(2) Initialize project

Execute the following command in CMD:

$ react-native init awesomeproject

TIPS:

1, the name of Awesomeproject can be arbitrarily modified.

2, if the react-native init projectname speed is very slow, you can set the domestic mirror. The react-native command line has trouble dragging code from NPM's official source for well-known network reasons. Please replace the NPM repository source with a domestic mirror:

Npmconfig Set Registry https://registry.npm.taobao.org

Npmconfig Set Disturl https://npm.taobao.org/dist

(3) Commencement of engineering services

Reopen a cmd and switch to the Awesomproject directory

Perform NPM start, the prompt is displayed, and then enter the react-native Start command. If that proves your service has started, here we can see that the port of the service is 8081.

We certify in the browser whether the service is started:

Enter address in browser:http://localhost:8081/index.android.bundle?platform=android

If so, it proves that the service has been started.

TIPS:

1, at the start, if there are various errors, please check the version of Python,. NETFramework, C + + operating environment is installed correctly.

2, the path of the project can not have Chinese, otherwise, may appear inexplicable error.

(4) Compile and run the project

Execution react-native run-android Command

If it shows, it means Awesomeproject the project was compiled successfully.

TIPS:

If the following error occurs:

Please check:

1, the service is correctly started;

2, whether the virtual machine can access the network normally;

3, if all is not a problem, please make the following settings:

Run adb shell input keyevent 82 on the command line to open the Developer menu as shown in:

Enter Dev Settings.

Click Debug Server Host for device

Manually type the IP address of your computer and the port of the local development server, the default port is 8081 (e.g. 172.19.2.178:8081)

If the ADB command is not valid, it may be because the Android tool directory is not joined to path.

Build a Windows-based React Native development environment (for Android)