原文地址：

http://www.csdn.net/article/2015-09-24/2825787-react-native

Facebook開源React Native也勢要統一移動端程式語言，而其提前釋出React Native for Android更是引得國內外開發者一眾熱捧。MDCC 2015平臺與技術Android專場與會講師——阿里巴巴工程師 廖祜秋以《React Native for Android》為主題，將在大會上深度分享React Native 下的 Android 開發，先行撰文對React Native進行實戰，本文為第一篇。 

圖：阿里巴巴工程師 廖祜秋 

以下為正文：

2015 年 9 月 15 號，React Native for Android 釋出。至此，React 基本完成了對多端的支援。基於 React / React Native 可以：

• HTML5、Android、iOS 多端程式碼複用；
• 實時熱部署。

在接下來的時間，我會通過一系列文章來介紹 React Native。本文介紹環境配置以及如何建立一個簡單的專案。（注：本篇文章 iOS 和 Android 開發都適用。）

目前使用 React Native 開發只能在 Mac 系統 上進行。寫 iOS 的同學，應該都是 Mac （除了聽說網易有些部門寫 iOS 給黑蘋果之外，哈哈哈哈）。 開發 Android 的同學, 如果公司配發的不是 Mac 的話，建議自己入手一個，能顯著提高生產力，就當投資自己吧。我大阿里對 Android 開發也是不給 Mac 的（不知道公司什麼思路，現在倒是可以申請 Mac air了，air的效能……），所以我也是自己買的。

環境配置

需要安裝的有：

Homebrew 是 Mac 中的一個包管理器。沒有安裝的話，點選 這裡安裝，我的版本如下：

mac-2:~ srain$ brew -v
Homebrew 0.9.5 (git revision ac9a7; last commit 2015-09-21)

版本過低將會導致無法安裝後續幾個元件。可用 brew update 升級。

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

安裝好之後，如下：

mac-2:react-native srain$ node -v
v4.0.0
mac-2:react-native srain$ npm -v
2.14.2

這兩個包分別是監控檔案變化和型別檢查的。安裝如下：

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 安裝以下包：

1. Android SDK Build-tools version 23.0.1
2. Android 6.0 (API 23)
3. 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

結論和後續

本篇文章，iOS 和 Android 都適用。至此，環境配置和示例專案執行應該都好了。後續我會繼續發幾篇文章介紹：

• 重點介紹 Android 相關的開發：包括元件，原始碼分析等；
• 動態熱部署；
• 多端程式碼複用。

參考文件

時間倉促，水平有限，如有謬誤，還請糾正，原始文件在這裡。