Windows Android react native detailed installation configuration process

Write in front:

Search on the Internet a lot of installation configuration documents, feel no really with my installation of the process is exactly the same, east and west to gather together, finally is installed, I will not tell you, intermittent, I spent two days time ... One to black screen error is dumbfounded, fortunately in the react Group met enthusiastic peers, and colleagues help ... The nonsense is here, this is just a record of my own loading process, the system environment a variety of different, may be more or less different.

My Computer, Windows7 64-bit has been installed before the ECLIPISE,JAVA,JDK, so, some installation documents above the Java JDK and C + +, I do not need on the computer.

I'll just paste it up here.

Refer to the Good links:

Installation documentation on the React Chinese forum

The most detailed Windows version ever installed react native environment configuration

Genymotion installation instructions for virtual machines:

Http://www.codeceo.com/article/android-genymotion-config.html

1. Install Java JDK

Download the JDK from the Java website and install it. Please note whether to select x86 or x64 version. http://jdk.android-studio.org/

It is recommended that the bin directory of the JDK be added to the system PATH environment variable. After the installation is complete, test the PATH Environment cmd command line input java.

To configure the environment variables, you can refer to this address:

Http://jingyan.baidu.com/article/db55b609fa946e4ba20a2f56.html

The success is:

2. Install the Android SDK

You can install the Android SDK separately or through Eclipse ADT or Android Studio. I am using Android Studio, please note that choose x86 or x64 version. The process is very slow, because the file is very large, also look at the speed. To expedite the download, it is recommended to download from Androiddevtools.

has been the default installation download down, there is no other problem, after down, find the File-->setting-->android SDK red box These are to hook and install, the process is very slow. One of the Android SDK Build-tools must choose "Android SDK Build-tools version 23.0.1" (23.0.1 this edition, there are many different versions).

3, install the Android environment settings Android SDK These are downloaded after the installation is complete, also configure environment variables, is the Android environment settings

1. New environment variable, android_home:android the location of SDK Manager

For example, above My computer: (android_home=> C:\Users\hsq\AppData\Local\Android\Sdk)

2. Set the environment variable PATH: For example: (path=>%android_home%\tools;%android_home%\platform-tools)

Open the command line and enter Android and ADB to test separately and test successfully.

4. Install node. js

This is a JS-based, node. JS Lightweight Web server, want to be react native run up need to install node, if you do not have node. js installed, first to install node. JS on the official website, preferably the latest 6.0 version

: https://nodejs.org/en/

Download node. js, find the corresponding version, and then go to install it.
You can test whether the Nodejs was successfully installed by NODE-V command.

5. Install C + + environment

I have installed a few of these software.

It is recommended to download and install Visual Studio 2013 or 2015 from itellyou. You can also choose other C + + environments such as the Windows SDK, Cygwin, or MinGW. needed to compile C + + modules for node. js.
If you are using VS2015, you only need to select the installation of C + + on the line, you have to set the command linenpm config set msvs_version 2015 --global

Install Git for Windows

Download the installation here 安装过程中注意选择"Run Git from Windows Command Prompt" .

This installation software will automatically add git to the environment variable.

Install Python

Download and install Python 2.7.x from official website (3.x version not available)

My system is 64 bits required corresponding 64 bits, and also to be configured in the environment variable, add the installed directory in path, for example, installed in the D disk, D:/PYTHON/6, install react-native command line tool: Because of well-known network reasons, The react-native command line will be in trouble when dragging code from the NPM official source. Replace the NPM repository source with a domestic mirror and enter it at the command line:

npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist

npm install -g react-native-cli

After installation, you can have the react-native command on the command line. 7, create RN Project

Create a new folder on your computer awesomeproject, this is placed in the E-disk react_native_workspace directory, command line into your directory awesomeproject, input react-native init Awesomeproject, wait a while (slower)

8. Running Packager

就是在命令行输入：
react-native start

Run OK, you can use the browser to access http://localhost:8081/index.android.bundle?platform=android see if you can see the packaged script (see a long JS code is right). The first visit usually takes more than 10 seconds, and a progress bar like [= = = = = = = =] is visible on the Packager command line.

If you encounter an ERROR Watcher took too long to load error, try modifying it to change node_modules/react-native/packager/react-packager/src/FileWatcher/index.js the max_wait_time from 25000 to a larger value (in milliseconds)

这个地方很容易出错，如果出了其他的错，检查一下上面的各个软件和环境变量是否配置了。

9. Running the simulator

It is recommended to use bluestacks but be careful about the ads and spam apps it pushes.

If there is a real machine, you can not run the emulator, to configure the driver, so that the ADB devices can see the corresponding device.

10. Android Run

保持packager开启，就是上一步的命令行不关闭的意思, and then open a command-line window and run it in the project directory (my Awesomeproject folder)

react-native run-android

The first run takes a few minutes and downloads gradle dependencies from the Web. (There may be many decimal points on the screen that indicate the download progress.) This may take a long time, and it may be that the link timeout, connection interruption, etc.-depends on your network condition and the wall's non-specific blocking. In short, to download smoothly, please use a stable and effective scientific Internet tools. ）

After running, you can see the app start automatically on the emulator or on the real machine.

If an error occurs when the APK installation runs 请检查上文中安装SDK的环节里所有依赖是否都已装全，platform-tools是否已经设到了PATH环境变量中，运行adb devices能否看到设备 .

At this point, 应该能看到APP红屏报错，这是正常的，我们还需要让app能够正确访问pc端的packager服务 .

To shake the device or press the menu key (the Bluestacks simulator presses the menus key on the keyboard, usually on the left side of the right ctrl or next to the left Windows key), you can open the Debug menu, click Dev Settings, and choose Debug Server host for device, Enter your 正在运行packager的那台电脑的局域网IP加:8081 (at the same time to ensure that the phone and computer in the same network segment, and no firewall block), and then press the back key to return, and then press the menu key, select Reload JS in the Debug menu, you should be able to see the results of the operation.

If the real device white screen but does not pop up any error, you can in the security of mind to see whether the application of "suspended Windows" permission is forbidden.

11. Android Debugging

Open Chrome and visit http://localhost:8081/debugger-ui and you should see a page. Press F12 to open the developer menu.

You can start debugging by selecting Debug JS in the simulator or the real-machine menu.

Author's original: http://www.cnblogs.com/web-sheena/p/5513087.html

Blog is to remember that they are easy to forget things, but also a summary of their work, the article can be reproduced, without copyright. Hope to do their own efforts to do better, we work together to improve!

If there is any problem, welcome to discuss together, code if there is a problem, you are welcome to the great God!

Windows Android React native detailed installation configuration process