Windows version build installation react native environment configuration

• Installing Java (configuration Java_home)

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

• Installing the SDK (configuration Android_home)

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).

• Install node

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. Test whether the Nodejs installation was successful by Node-v's command.

• 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

• Global Installation react-native command-line tools REACT-NATIVE-CLI

NPM install-g REACT-NATIVE-CLI

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

• Create an RN project

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

• 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.

• Run the project

Enter React-native run-android, wait for the run (if it is first run, first will download Gradle decompression, long time).

Occurs after a successful run

The first time the phone will definitely error, this time will be the dazzling red to bright blind, MO Panic!!!

This time we shake the phone, click on dev Settings, click Debug Server Host & port for device, set the 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 the setup is complete, go back to the blank page, shake the phone again, choose Reload, the program will run up, appear welcome to React native!

• Encounter the Pit

1. After executing: react-native start, open URL: http://localhost:8081/index.android.bundle?platform=android, you will encounter error Transformerror failure.

Solution:

Yarn Remove babel-preset-react-nativeyarn add Babel[email protected]

2. Simulator Debug OK, the real machine USB debugging failed, unable to install the app. At this point the phone should be the same as the computer in the same LAN port settings to the same (8081), of course, you can also customize IP and port

React-native start--host 192.168.155.1--port 8081

3.Android Studio Launch app failed to download the associated ANDROID-XX.

4.build failure, pay attention to the instant run Pit: Android Studio 2.0 provides a hot fix debug mode, but I have a lot of bugs in the process, such as Ali push does not support this new feature, resulting in each debug will crash. In File->settings->instant run, tick the first item to cancel

Windows version build installation react native environment configuration