Windows Build installation React native environment configuration

Source: Internet
Author: User
Tags blank page install node android sdk manager



1. Install Java



Here we need to pay attention to the setting of environment variables, can be detected according to Java-version, JDK preferably more than 1.8



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



The following is the beginning of the formal RN environment configuration



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. I installed the 4.4.4 version, you can also install other



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/



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



After the git configuration is completeclone React-native-cli, we recommend that you clone the REACT-NATIVE-CLI to a disk, and do not clone directly in the C drive.
(If you encounter cmd can not enter the directory, how to solve?) ) Look at the following



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



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



After cloning succeeds:



3) Enter the REACT-NATIVE-CLI directory under the react-native directory just below the directory, enternpm 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, enterreact-native init AwesomeProject, (here Awesomeproject is the project name) for a period of time (slower)



After success:



Directory structure:



7. Run the Package



In the command line enter the project directory, enterreact-native start, 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,



Enter the project directory, inputreact-native run-android(remember to open the emulator before entering this command, or connect to the real machine)



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



After the success of the simulator as



I am because my computer and mobile phone in the same LAN, so the first time to succeed, but usually the first time the phone will be an error, such as



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!



At this point we can carry out RN development, the new Hollo world (^ω^)



Windows 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: info-contact@alibabacloud.com 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.