Windows version build installation react native environment configuration

Source: Internet
Author: User
Tags blank page install node

    • 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

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/, 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/, you will encounter error Transformerror failure.
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 8081

3.Android Studio Launch app failed to download the associated ANDROID-XX. 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.