The most detailed Windows version ever installed react native environment configuration

Said in front of the words:

Thank colleagues Jin Xiaobing for the environment to build a tutorial

Before we explained the environment of the react native OS X system and the configuration, given that there are many people in the various groups in the Windows environment to build a variety of problems, today is specifically updated to explain. For OS X environment Setup and react native introductory learning materials, please visit: http://www.lcode.org/react-native/

Newly created React native Technical Exchange 3 Group (496508742), Welcome to Daniel, React native technology enthusiasts to join the exchange! At the same time the blog right welcome scanning attention to the subscription number, mobile technology dry, wonderful article technology push!

1. Install Java

It is important to note the setting of the environment variable, which can be detected according to Java-version.

2. Installing the SDK

It is important to note that setting environment variables android_home:android the location of the SDK Manager for example: (android_home=> E:\Android\sdk) Set environment variable PATH: For example: (path=>% Android_home%\tools;%android_home%\platform-tools)

3. Setting up the SDK

• Open Android SDK Manager.
• Select the following items:

• Android SDK build-tools Version 23.0.1
• Android 6.0 (API 23)
• Android Support Repository
• Local Maven repository for support Libraries

4. Install node

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 4.1 or later

: 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 git

Git is required to install react-native, if Git is not configured, you need to download the corresponding client and then add git to the PATH environment variable
: https://git-for-windows.github.io/
Installation:

6. Install react-native command line tool REACT-NATIVE-CLI

After the GIT configuration can clone react-native-cli, we recommend you to the REACT-NATIVE-CLI clone to a disk, do not directly clone in the C disk

1) in the command line, enter the directory where you wish to install RN

2) Enter Git clone https://github.com/facebook/react-native.git, wait for download

Clone successfully executed: git clone-b master https://github.com/facebook/react-native.git

3) Enter the REACT-NATIVE-CLI directory under the React-native directory in the directory you just entered, and type NPM install-g

After installation, you can have the react-native command on the command line.

7. Create RN Project

After entering the directory where you want to create the project, enter React-native init awesomeproject and wait for a period of time (slower)

After success:

Directory structure:

7. Run the Package

In the command line, enter the project directory, type react-native start, and wait for a period of time:

This time can be accessed with the browser http://localhost:8081/index.android.bundle?platform=android, if you can access to indicate that the server side is ready.

7. Running the project

The command line that just ran the package does not close, restart a new command line,

Go to project directory and enter React-native run-android

Wait for the run (if it is the first run, the Gradle will be downloaded first, the time is longer)

Occurs after a successful run

The first phone must be an error

When we shake the phone, click Dev Settings, click Debug Server Host & port for device, set IP and ports

"Shake" This action in the simulator can use Ctrl+m (menu) to bring up the dev setting menu.

Here IP is the IP of the computer, do not know can be entered in the command line ipconfig to query, port number fixed 8081

After setting up, go back to the blank page, shake the phone again, choose Reload JS, the program will run up, appear welcome to React native!

Today we mainly explain the installation environment of react native in the Windows system. Because of the explanation and the actual use of back to meet a variety of problems. We have some questions. React Native Technology Exchange Group (282693535) or the bottom of the reply.

Respect the original, reproduced please specify: from Sky, Qing (http://www.lcode.org/) infringement must investigate!

Quote Original: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5% bb%ba%e5%ae%89%e8%a3%85react-native%e7%8e%af%e5%a2%83%e9%85%8d%e7%bd%ae/

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!

The most detailed Windows version ever installed react native environment configuration