Hello everyone. I'm Masahiro Yanou of KEY Team.
Technology Post No7!!「Try to React Native for Android」.
Past Post List is here.
React Native published on GitHub as open source by Facebook. This blog introduce the React Native for Android Sample.
Attention Today(2015/09/24), React Native supported only OSX.
Preparation
Install JDK
Install Homebrew
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Install Android SDK
$ brew install android-sdk
Add ANDROIDHOME to .bashprofile
ex) $ export ANDROID_HOME=/usr/local/opt/android-sdk
Download Android SDK
$ android
Start Emulator
$ android avd
After create, click Sart...
Install node(nodebrew)
$ curl -L git.io/nodebrew | perl - setup $ nodebrew install-binary latest $ nodebrew use latest
Install watchman and flow
$ brew install watchman $ brew install flow
Quick Start
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/
$ react-native run-android
※In this time, run Server to load a JavaScript from device.
If don't run server, output as follows:
[warn] JS server not recognized, continuing with build...
※In this time, if device don't exist, happen error.
$ $ANDROID_HOME/platform-tools/adb shell am start -n com.raproject/.MainActivity
Starting: Intent { cmp=com.raproject/.MainActivity }
After run command, start application.
Add Button
Before this section, sample only. so, I try to add button.
$ npm install react-native-button --save
When create button, you need to another module. I was very surprised.
In this time, when click button, output current time. When output current time, I used moment.
$ npm install moment --save
HTTP Connection
One more thing.
When development android with Java, you should write http code as background.
But in this time, you don't care it. It's too easy.
I used ajax Library SuperAgent.
$ npm install superagent --save
LAST
If you think react is very easy, you try React Native for Android .
See you next time.
Email: yanou at atware.co.jp