Facebook 於 2015 年 9 月 15 日推出 React Native for Android 版本。相比起 for iOS，for Android 跑 “Hello, World!” 折騰了不少。在這些複雜的環境、工具依賴裡，我們可以看出 React Native for Android 的一些端倪。

本系列文章就以開發一個 “Hello, World!” 的 App 為線索，跟大家一起來了解 React Native for Andorid 的技術背景。

• 本文以在 OS X 開發為例
• React Native 的更新非常活躍，本文以 0.14.0 版本為例
• 下文簡稱 React Native 為 RN
• 下文部分連結訪問需要訪問外國網站

基礎環境

在開始 RN 開發之前，我們需要在自己的機器上準備基礎的開發環境：

1. Homebrew OS X 不可或缺的套件管理器，待會我們會用到它來安裝 nvm
2. nvm：$ brew install nvm nvm 是 Node.js 的版本管理器，可以輕鬆安裝各個版本的 Node.js
3. Node.js：$ nvm install node && nvm alias default node 需要 4.0 或以上。RN CLI 使用到了 ES6 的語法特性

RN 官方還推薦我們安裝 2 個工具包，這是可選的，它們分別是：

1. watchman：$ brew install watchman
   Facebook 出品的檔案監控工具，如果你安裝了它，RN 會用它來檢測檔案變化，以便重新編譯。如果你沒有安裝，會預設使用 walker。

1. flow：$ brew install flow Facebook 出品的 JS 靜態型別的檢查器

如果你安裝了 watchman 又版本太低，那麼編譯專案的時候可以能會報錯 Cannot read property 'root' of null ，所以如果安裝了 watchman 請執行 $ brew update && brew upgrade 確保使用最新版本。

Android 開發環境

Android 應用程式開發中，通過在 Android SDK（Android 軟體開發包）中使用 Java 作為程式語言來開發應用程式（開發者亦可以通過在 Android NDK（Android Native 開發包）中使用 C 語言或者 C++ 語言來作為程式語言開發應用程式）。

此外，Google 還推出了 Android Studio ，是一個為 Android 平臺開發程式的整合開發環境（對比 iOS 的 Xcode）。

現在就來開始準備 Android 的開發環境：

1. Java Development Kit（JDK）：根據你的系統選擇合適的 JDK
2. Android SDK：$ brew install android-sdk SDK 指 Software Development Kit，軟體開發工具包。 這裡安裝的是 Stand-alone Android SDK Tools，基礎的 SDK 工具。預設情況下，這個 SDK 並不包括著手開發所需的一切內容。Android SDK 將工具、平臺和其他元件分成若干個軟體包，可以通過 Android SDK 管理器根據需要下載這些軟體包。因此需要先為 Android SDK 新增幾個軟體包，然後才能著手開發。
3. 選擇以下包進行新增安裝：命令列下執行 $ android 來開啟 SDK Manager
   • Android 支援庫，RN 內有用到
   • 編譯你的應用程式對一個特定版本的 Android 系統。
   • 版本說明：http://developer.android.com/intl/zh-cn/tools/revisions/platforms.html
   • 構建工具，需確保使用最新。
   • 包位置：$ANDROID_HOME/build-tools/$VERSION/
   • 主要工具：aapt (to generate R.java and unaligned, unsigned APKs), dx (to convert Java bytecode to Dalvik bytecode), and zipalign (to optimize your APKs)
   • 更新歷史：http://developer.android.com/tools/revisions/build-tools.html
   • 補充資料：What is Android SDK Build-tools and which version should be used?
   • 平臺相關性工具，支援最新 Android 版本功能的同時向下相容。
   • 包位置：$ANDROID_HOME/platform-tools
   • 主要工具：adb (to manage the state of an emulator or an Android device)
   • Android SDK 擴充套件工具包，它與具體 Android 平臺無關，包括一套完整的開發和除錯工具。
   • 包位置：$ANDROID_HOME/tools
   • 主要工具：ant scripts (to build your APKs) and ddms (for debugging)
   • 更新歷史：http://developer.android.com/tools/sdk/tools-notes.html
   • Android SDK Tools
   • Android SDK Platform-tools
   • Android SDK Build-tools
   • Android 6.0(API 23) - SDK Platform
   • Android Suppor Repository 安裝包圖示：

1. 設定環境變數 ANDROID_HOME RN 內使用該變數進行 Android SDK 查詢，程式碼如下：

1. 因此你需要設定此環境變數： 1. 開啟一個 Terminal 視窗，執行 `export ANDROID_HOME=/usr/local/opt/android-sdk`2. 把上面的命令貼上到`~/.bashrc`，`~/.bash_profile` 這樣每次 Terminal 啟動都會自動賦值 ANDROID_HOME 了

執行環境

完成了開發環境的準備，接下來我們需要準備應用的執行環境（類似於我們進行前端開發時需要在本機安裝一個瀏覽器來執行我們的程式碼），這裡有 2 種方式：

模擬器

第一種方式是在本機安裝 Android 模擬器，模擬一個 Android 系統。 這裡推薦使用 Genymotion，個人使用者免費的模擬器。

1. 下載 VirtualBox
2. 下載 Genymotion
3. 開啟 Genymotion，點選 “Add” 建立一個模擬裝置 剛才我們安裝了 Android 6.0(API 23) - SDK Platform ，所以請確保你建立的虛擬裝置 Android 版本不會大於這個
4. 選擇模擬裝置，點選 “Start” 啟動一個模擬裝置

真機

除了模擬器，我們還可以在手機上使用 USB 除錯模式把自己的應用執行在這個真機環境裡。

1. 設定你的手機允許 USB 除錯
2. 使用 USB 連線你的手機和電腦
3. 執行命令 $ adb devices 檢視當前可用裝置，確認除錯連線是否成功。如果成功在列表下將會出現你的裝置

開始你的第一個 RN for Android 應用

萬事具備，開始用 RN 新建一個 Android 應用並且讓它在你準備的執行環境裡跑起來吧。

安裝 RN 腳手架

$ npm install -g react-native-cli

react-native-cli(0.1.7) 只是一個外殼，實際執行的程式碼是在：react-native/local-cli/cli.js

初始化一個 RN 專案

• $ react-native init AwesomeProject
• 開啟 AwesomeProject/index.android.js ，修改 Text 標籤內的文案為 Hello, World!

啟動除錯

在 AwesomeProject 專案目錄執行 $ react-native run-android，如果你使用的執行環境是模擬器，如無意外，你將會在你的模擬器上看到這個畫面：