Build react native development environment under MAC

Install required software Homebrew

Homebrew, a Package manager for Mac Systems, is used to install Nodejs and some other required tool software.

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

Homebrew may encounter/usr/locala directory not writable permission issue when installing the software. You can use the following command to fix:

sudo chown -R `whoami` /usr/local

Node

Use Homebrew to install node. js.

node

Note There is a pit: check whether the installed node is the latest version, the default installation is not the latest version (I thought the default gave me the latest (v8.00), in fact, the default only to me installed v4.0.0,v4.0.0 not support ES6, when the following with React-native Init < Syntax errors are reported when project>

Workaround:

1. Use the command to view the current version after installing node

node -v

2. Then check the latest version

npm info node

3. Upgrade Node

Clear node. JS Cache:

sudo npm cache clean -f

Install n tools, n is specifically to manage the node. JS version

sudo npm install -g n

Install the latest node version

sudo n stable

Yarn, React Native command-line tool (REACT-NATIVE-CLI)

Yarn is a tool that Facebook offers to replace NPM to speed up the download of node modules. React Native's command-line tools are used to perform tasks such as creating, initializing, updating projects, running packaged Services (packager), and so on.

npm install -g yarn react-native-cli

After you install yarn, you should also set the mirror source:

set registry https://registry.npm.taobao.org --globalyarn config set disturl https://npm.taobao.org/dist --global

Android Studio

iOS Programmer please Bypass

Android Studio requires Java development Kit [JDK] version 1.8 or later. You can enter javac-version on the command line to view the JDK version you are currently installing. If the version is not required, you can download it on the official website.

Specific installation steps are not detailed here, there should be a lot of tutorials on the web.

Android_home Environment variables

Environment variables are important! Otherwise, the project won't run up.

Create or edit using the VI ~/.bash_profile command under Terminal. If you are unfamiliar with VI operation, please click here http://www.eepw.com.cn/article/48018.htm)

Then use the following command to make it effective immediately (or restart before it takes effect):

source ~/.bash_profile

You can use toecho $ANDROID_HOMEcheck whether this variable is set correctly.

Xcode

Android Programmer please Bypass

React native currently requires Xcode 8.0 or later. You can download it from the App Store or on the Apple developer website. This step installs both the Xcode IDE and the Xcode command-line tool. Although command-line tools are generally installed by default, you might want to start Xcode andXcode | Preferences | Locationscheck the menu to see if a version is loadedCommand Line Tools.

Gradle Daemon

Opening Gradle daemon can greatly increase the speed of incremental compilation of Java code.

touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties

Test installation

react-native init AndroidProject

cd AndroidProjectreact-native run-android

Tip: You can use--versionparameters to create a specific version of the project. For examplereact-native init MyApp --version 0.44.3. Note that the version number must be exactly two decimal points.

The init command creates the latest version by default, and the latest need to download the boost library compilation. This library is large in size, even FQ in China is difficult to download successfully, resulting in many people can not run the iOS project , Chinese network in the forum provides these libraries of the domestic download links. If you are in trouble and have no need for a new version, you can create0.44.3a version temporarily.

react-native init AndroidIos --verison 0.44.3cd AndroidIosreact-native run-ios/run-android

The results of the operation are as follows:

Recommended Tools for installation

Webstorm

Webstorm is a JavaScript development tool owned by JetBrains Corporation. At present, the vast number of Chinese JS developers known as "web front-end development artifact", "the most powerful HTML5 editor", "the most intelligent JavaScript IDE" and so on. And IntelliJ idea homologous, inherited the IntelliJ idea powerful JS part of the function.

Webstorm is a toll development tool, but has a one-month trial time. (webstorm.2017.1.4 online has cracked version, we can consider downloading use)

Configuring JSX Support

Webstorm->preferences->languaes&frameworks->jacascript, then select Reactjsx, download and install react,react native

Configuring the Run Configurations

Find Edit configurations in the menu bar

Finally select the platform to run the project

Reference Document: Http://reactnative.cn/docs/0.46/getting-started.html#content

Build react native development environment under MAC