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:
Currently using React Native development can only be done on MAC systems. So the configuration is based on Mac OS.
The first things you need to install are:
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
Install with NPM:
npm install -g react-native-cli
Settings for the APP development environment
Set Environment variables:
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
ios project file with two platforms, respectively.
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.
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"];
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.
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:
Facebook React Native Configuration Summary