React Native Environment configuration

Source: Internet
Author: User
Tags blank page oracle vm virtualbox vm virtualbox android sdk manager

React Native Environment configuration

The most full Windows version ever installed react native environment configuration

Configured over React Native environment are aware that in the Windows React Native environment configuration has a lot of pits to jump, in order to help newbies quickly and correctly set up the environment of this site to build a tutorial.

Installation learning encounters any problems you can join Reactnative Advanced AC Group 127482131 or visit http://blog.1ygowu.com reactnative technical topics

The first step is to install the Java JDK

    1. Download the 1.8 32-bit or 64-bit SDK that corresponds to your computer system version.
    2. Download website http://jdk.android-studio.org/
    3. Test Path Environment cmd command line input Java content after installation is complete

Second step to install Android environment
    1. Http://tools.android-studio.org/index.php/sdk
    2. Install installer_r24.3.4-windows.exe after download, interface appears after successful installation, select SDK Manager to open
    3. Install the following package, all must be installed if the site is wall can set mirror site
    4. In particular, Intel x86 Emulator HAXM install needs to be installed on its own and enabled in the BIOS to support Intel Virtualization technology
    5. If the download is slow, you can set the mirror
    • Launch Android SDK Manager, open the main interface, select "tools", "options...", pop up the "Android SDK manager-settings" window;
    • In the "Android SDK manager-settings" window, fill in and in the "http proxy server" and "http proxy port" input mirrors.neusoft.edu.cn  boxes 80 , and select "force https://... sour Ces to is fetched using http://..."check box. Click the "close" button to close the "Android SDK manager-settings" window and return to the main screen after Setup is complete.
    • Select "packages", "reload".
Step three Android environment settings 1. Find My Computer-Properties-Advanced system Settings-advanced-environment variable new ANDROID_HOMN value phenomenon you installed the SKD directory such as: D:\Program Files (x86) \ANDROID\ANDROID-SDK  2. Path adds the following content%android_home%;%android_home%\platforms;%android_home%\platform-tools;%android_home%\tools; Test whether the configuration is successful, open command line input Android and ADB test must be successful, the next to correctly compile the project fourth step other environment configuration recommended installation on Python 2.7, some may not install or nothing https://www.python.org/down loads/Install git install react-native need git, if you do not configure git, you need to download the corresponding client: https://git-for-windows.github.io/Fifth step RN environment setting and building
    1. Download stable version Nodejs v5.7.0 Stable
      Download website https://nodejs.org/en/
    2. Post-installation command line input NPM test success
Because of well-known network reasons, the React-native command line will be in trouble when dragging code from NPM official source. Please replace the NPM repository source with a domestic mirror:
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 to create the RN Project command line into the directory entry where you want to create the project
react-native init AwesomeProject
It's probably going to be slow, and so on, about 200 m file   Enter the project directory on the command line, enter react-native start, wait some time:    some people error need to delete the following file (self-backup) d:\ Program files\reactnative\myproject\node_modules\react-deep-force-update\.babelrc   can now use a browser to access HTTP.// localhost:8081/index.android.bundle?platform=android   if the above script contents indicate that the server side is ready.    Sixth step configuration Android simulator     Note Essentials Memory settings 515 turn on the GPU configuration and start the emulator if you can't use genymotion,   Recommended to use the Genymotion simulator than Google's simulator to install Genymotion-2.6.0-vbox may want to go to the official website to register an account official website download https://www.genymotion.com/Download Network/HTTP pan.baidu.com/s/1bntnxs7  installation needs to be configured under, here pit me for a long time, run-android can not find the device will need to set this  genymotion not network configuration problems, online find a lot of tutorials can not be used, Later on self-study the following solutions    Local Area Connection-properties-sharing-Set the following    view shared IP settings will be used to    modify the Oracle VM VirtualBox configuration Nic 1    NIC 2 configuration    Configure IP Management Global Settings double-click VirtualBox Host-onley Ethernet adapter     The last step, is also the most important step to open the simulator WiFi, or the subsequent project error. show no network, but actually available connection network test service port IP for your native IP ipconfig view local connection IPv4 address     Seventh step   Compile code package to emulator CD to project file directory using react-native Run-android  &nBSP; wait to run (if it is first run, first download gradle, longer)    successful interface    First run will appear,   this time we shake the phone, click Dev Settings, Click Debug Server Host & port for device, set IP and Ports     IP here is your local computer's IPv4 IP, do not know the command line can be entered ipconfig to query, Port number fixed 8081  set, back to the blank page, shake the phone again, choose Reload JS, the program runs up, appear welcome to React native!     completed if you install learning encounter any problems can join Reactnative Advanced AC Group  127482131 or access  http://blog.1ygowu.com  Reactnative Technical Topics

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.