Facebook React Native Configuration Summary

September 15, 2015, React Native for Android released. At this point, React basically completed the multi-terminal support. Based on React/react Native, you can:

• H5, Android, IOS multi-code multiplexing

• Real-time Hot deployment

Currently using React Native development can only be done on MAC systems. So the configuration is based on Mac OS.

Environment configuration

The first things you need to install are:

Homebrew (Brew):

Homebrew is an installation package manager in your MAC. If not installed, click here to install my version as follows:

A low version will result in the inability to install the next few components. Available brew update upgrades.

node. js and NPM

node. JS needs 4.0 and is above the version. After the installation, NPM has it as well.

Installing node. js from NVM

NVM is the version manager of node. js that makes it easy to install versions of node. js.

Installing NVM can be installed via Homebrew:

brew install nvm

or install it in the same way as here.

Then install node. JS:

  && nvm alias default node

也可以直接下载安装 Node.js： https://nodejs.org/en/download/

Installing Watchman and Flow

These two packages are monitoring file changes and type checking, respectively. Install the following:

brew install watchmanbrew install flow

Installing React-native

Install with NPM:

npm install -g react-native-cli

Settings for the APP development environment

• Ios

  XCode 6.3 and beyond.

• Android

  This is more troublesome.

Set Environment variables:ANDROID_HOME

Export android_home=/usr/local/opt/android-sdk

The SDK Manager installs the following packages:

Android SDK build-tools Version 23.0.1

Android 6.0 (API 23)

Android Support Repository

Configuration is complete.

Initialize the first Hello World project

The documentation mentions:

react-native init x 项目名称

Wait a while (depending on the network) for a long time, project initialization is complete.

Go to the project directory:

 CD project name  run: ls-ltotal 24drwxr-xr-x 14 Srain staff 476 Sep 21 09:52 android-rw-r--r--1 Srain staff 1023 Sep 21 11:47 index.android.js-rw-r--r--1 Srain staff 1065 Sep 20 11:58 index.ios.jsdrwxr-xr-x 6 Srain staff 204 Sep 20 11:58 iosdrwxr-xr-x 5 Srain staff 170 Sep 21 10:31 node_modules-rw-r--r--1 Srain staff 209 Sep 20 11:58 Package.json                

A android ios project file with two platforms, respectively. index.android.jsand a index.ios.js js file corresponding to two pages.

Run the project

Whether it's IOS or Android, in the development debugging phase, you need to start an HTTP service on your Mac, called ' Debug server ', which runs on port 8081 by default, and the APP-debug server loads JS. IOS and Android Simulator, the service that connects Mac native is very convenient. But debugging via USB or WiFi connection is a bit trickier.

Ios

Still very simple, XCode open the project, click to run just fine. Modify index.ios.js , re-load JS in the simulator to ? + R see the corresponding changes.

IOS Real-Computer debugging is also simple, modify the HTTP address.

Jscodelocation = [Nsurl urlwithstring:@ "Http://localhost:8081/index.ios.bundle"];

　　

Android

According to the official documentation, a simulator (Genymotion Simulator is also available) is required. But unlike ios,android development usually more is directly with the real machine for development and debugging, how to run the deployment to the real machine.

Run command

React-native run-android

Then you will deploy to the simulator, modify index.android.js , bring up the simulator menu key, choose to reload JS to see the changes.

The sample APP is deployed directly to the real machine, and the Red interface error, unable to connect to the Debug Server.

If the model is 5.0 or above, the MAC port can be reversed to the test machine via the ADB reverse proxy port.

adb reverse tcp:8081 tcp:8081

If the machine below 5.0 is installed on the test machine, shake the device, select Dev Setting > Debug Server Host for device in the pop-up menu, and then fill in the IP address of the MAC

debugging development in Android Studio

Open the project in Android Studio, and then compile the deployment to the real machine.

At this point, start the Debug Server at the command line:

react-native start

官方文档：https://facebook.github.io/react-native/docs/getting-started.html#content


参考：http://www.liaohuqiu.net/cn/posts/react-native-1/
     https://github.com/creationix/nvm#installation
     http://www.jianshu.com/p/cd2a8c5ee1c7
     http://wiki.jikexueyuan.com/project/react-native/NativeComponentsAndroid.html
     http://www.tuicool.com/articles/V3U3UbU

Facebook React Native Configuration Summary