Facebook開源React Native也勢要統一移動端編程語言，而其提前發布React Native for Android更是引得國內外開發者一眾熱捧。MDCC 2015平臺與技術Android專場與會講師——阿里巴巴工程師 廖祜秋以《React Native for Android》為主題，將在大會上深度分享React Native 下的 Android 開發，先行撰文對React Native進行實戰
環境配置
需要安裝的有：
Homebrew
Homebrew 是 Mac 中的一個包管理器。沒有安裝的話，點擊 安裝，我的版本如下：
mac-2:~ srain$ brew -v
Homebrew 0.9.5 (git revision ac9a7; last commit 2015-09-21)
版本過低將會導致無法安裝后續幾個組件。可用 brew update 升級。
Node.js 和 npm
Node.js 需要 4.0 及其以上版本。安裝好之后，npm 也有了。
通過 nvm 安裝 Node.js
nvm 是 Node.js 的版本管理器，可以輕松安裝各個版本的 Node.js 版本。
安裝 nvm 可以通過 Homebrew 安裝：
brew install nvm
然后安裝 Node.js：
nvm install node && nvm alias default node
也可以直接下載安裝 Node.js： https://nodejs.org/en/download/
安裝好之后，如下：
mac-2:react-native srain$ node -v
v4.0.0
mac-2:react-native srain$ npm -v
2.14.2
安裝 watchman 和 flow
這兩個包分別是監控文件變化和類型檢查的。安裝如下：
brew install watchman
brew install flow
安裝 React-Native
通過 npm安裝即可：
npm install -g react-native-cli
App開發環境的設置
iOS
XCode 6.3 及其以上即可。
Android
這個比較麻煩。
設置環境變量：ANDROID_HOME
export ANDROID_HOME=/usr/local/opt/android-sdk
SDK Manager 安裝以下包：
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
初始化一個項目
文檔提到：
react-native init AwesomeProject
初始化一個項目，其中 AwesomeProject 是項目名字，這個隨意。等待一段時間之后（具體視網絡情況而定），項目初始化完成。
進入到項目目錄：
cd AwesomeProject
mac-2:AwesomeProject srain$ ls -l
total 24
drwxr-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.js
drwxr-xr-x? 6 srain? staff? 204 Sep 20 11:58 ios
drwxr-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
其中 android 和 ios 中分別為兩個平臺的項目文件。index.android.js 和 index.ios.js 為兩個頁面對應的 js 文件。
運行項目
不管是 iOS 還是 Android，在開發調試階段，都需要在 Mac 上啟動一個 HTTP 服務，稱為“Debug Server”，默認運行在 8081 端口，APP 通 Debug Server 加載 js。
iOS 和 Android 的模擬器，連接 Mac 本機的服務都很方便。但是通過 USB 或者 WiFi 連接調試，就稍微麻煩一些了。
iOS
還是非常簡單，XCode 打開項目，點擊運行就好。修改 index.ios.js, 在模擬器中 ? + R 重新載入 js 即可看到相應的變化。
iOS 真機調試也簡單，修改HTTP地址即可。
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
Android
按照官方文檔，需要一個模擬器（Genymotion模擬器也可以）。但是不像 iOS，Android 開發平時更多是直接用真機進行開發和調試，如何運行部署到真機，下面會提到。
運行命令：
react-native run-android
然后就會部署到模擬器，修改 index.android.js ，調出模擬器菜單鍵，選擇重新載入 js 即可看到變化。
Android 真機調試
示例 App 直接部署到真機，紅色界面報錯，無法連接到 Debug Server。如果是 5.0 或者以上機型，可通過 adb 反向代理端口，將 Mac 端口反向代理到測試機上。
adb reverse tcp:8081 tcp:8081
如果 5.0 以下機器，應用安裝到測試機上之后，搖動設備，在彈出菜單中選擇 Dev Setting > Debug Server host for device，然后填入 Mac 的 IP 地址（ifconfig 命令可查看本機 IP）
關于修改 DevHelper 來進行和 iOS 一樣的開發調試，后續關于熱部署時，我會介紹到。
在 Android Studio 中調試開發
我們可能希望在 Android Studio 打開項目，然后編譯部署到真機。
這個時候，在命令行啟動 Debug Server 即可：
react-native start
