React Native Development Environment construction

• Installing Xcode
• Installing homebrew
• Check for warnings
• Installing the Android SDK
• Installing Flow and Watchman
• Installing Nodejs
• Installing REACT-NATIVE-CLI
• Installing Genymotion
• Installing Webstorm 10
• Create React native Empty project
• Editing JSX code files with Webstorm
• Running in the iOS emulator
• Running in the Android emulator

Installing Xcode

Search for downloads from the App Store. An Apple ID account is required.

Installing homebrew

Open terminal and execute the following command to install. Please refer to homebrew website (http://brew.sh/) for details.

Install Homebrew

# no need VPN/usr/bin/ruby-e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Check for warnings

Open Terminal, execute the following command, and follow the prompts to dismiss the warning issue.

# no need Vpnbrew doctor

Installing the Android SDK

The Android SDK can be easily installed to the default directory "/USR/LOCAL/OPT/ANDROID-SDK" via homebrew. Please execute the following command in terminal.

Install Android SDK

# no need VPNbrew installandroid-sdk

You need to set the environment variable $android_home, $PATH.

Install Android SDK

# Execute the following command in Terminal to open the environment variable configuration file sudonano ~ / .bash_profile # Paste the following instructions and save the environment variables (need to log out and log in to mac again) export ANDROID_HOME = / usr / local / opt / android-sdkexportPATH = $ PATH : $ ANDROID_HOME / bin: $ ANDROID_HOME / tools # Press CTRL ＋ X to save

Updating the Android SDK component (requires a VPN to be hung)

You can open the Android SDK Update Management tool by executing the "Android SDK" in terminal.

If you install the components in the Android SDK, note that the "Android SDK Build-tools" version requires 23.0.1, and you can not install the "Intel x86 atom_64 System Image" and "If you use Genymotion" Intel x86 Atom System Image.

Installing Flow and Watchman

Please execute the following two commands in terminal.

Install Flow

# no need VPNbrew installflowbrew installwatchman

Installing Nodejs

Download and install the latest version of Nodejs (current version: v4.3.1) from Nodejs official website (https://nodejs.org/en/).

Installing REACT-NATIVE-CLI

"React-native-cli" can be easily installed with Nodejs. Please execute the following commands in terminal (note using the "sudo" and "-g" options).

Install REACT-NATIVE-CLI

# no need VPNsudonpm install-g react-native-cli

Installing Genymotion

First install VirtualBox, from Baidu Search can.

The genymotion is more fluid and recommended for installation than the emulator that comes with the Android SDK. Need to go to the official website (https://www.genymotion.com/) to register a personal user account.

Installing Webstorm 10

Webstorm can support JSX syntax well, and can format code files, suitable for developing react native projects. Version 10.0.4 can be downloaded from the Webstorm official website (https://confluence.jetbrains.com/display/WI/Previous+WebStorm+Releases). In the collaboration platform, you can find the registration code.

Create React native Empty project

It is recommended that you create a root directory for the React native project, such as: ~/rctdev, and then execute the following command in terminal (which may take a few minutes):

Create first Project

# no need VPNcd~/RCTDevreact-native init NCFirstProject

You can create a new project named "Ncfirstproject".

Editing JSX code files with Webstorm

Open the Directory "~/rctdev/ncfirstproject" with Webstorm, and double-click Open index.ios.js file. Wait for Webstorm to recognize the JSX code syntax, and then click Switch Toggle.

On the Webstrom command line, enter the "npm Install" command to initialize the "React Native" dependency.

install dependencies of react-native

# no need VPNnpm install

Running in the iOS emulator

On the Webstrom command line, enter react-native Run-ios to open the iOS simulator and run the Change project.

Shortcut keys:

• Command+r Modify any JS code, you can change the shortcut key to reload the app to see the effect.
• Ctrl+command+z Open the menu to enable auto-reload, view frame rate, review elements, and more.

Running in the Android emulator

First, you need to log in to Genymotion and install an Android image. After you run the Android image, you can perform "react-native run-android" in the webstorm command window.

Shortcut keys:

• Command+m Open the menu, you can choose to reload the app, enable auto reload, view frame rate, review elements, and more.

React Native Development Environment construction