學習 React Native for Android：環境搭建

學習 React Native for Android 的開發環境搭建。

Contents

• 準備工作
• 基本開發環境搭建
  • 安裝 Homebrew
  • 安裝 Node.js
  • 安裝 watchman
  • 安裝 flow
  • 安裝 Android SDK
  • 安裝 React Native
• Nuclide IDE 的安裝和配置（可選）
  • 安裝 Atom
  • 安裝 Nuclide
  • 其他推薦插件
• 第一個小程序：AwesomeProject
• 小技巧
  • 添加 Alias
  • 自動刷新界面

原文鏈接：http://hahack.com/codes/learn-react-native-for-android-01/?utm_source=tuicool&utm_medium=referral

Facebook 於 2015 年 9 月 15 日發佈了 React Native for Android 。React Native 讓開發者使用 JavaScript 和 React 編寫應用，利用相同的核心代碼就可以創建 Web，iOS 和 Android 平臺的原生應用。注意這裏的 核心 兩個詞，它指的是那些底層的、與界面無關的邏輯。與 ionic / PhoneGap 這類 Web App 開發框架不同，React Native 主張使用 React 的開發方式來開發 Native 應用，因爲在現階段 Web App 還無法達到 Native App 的體驗。所以，React Native 並不強調 write Once, run everywhere ，而是 learn once, write everywhere ：上層使用 JS 和 React 開發不同平臺的 UI，下層則可以編寫能夠複用的核心代碼，從而大幅提高開發效率。

關於 React Native 的好處，唐巧在 《談談 React Native》 裏已經有比較深刻的總結，本文不再贅述。本文將作爲一個 React Native for Android 學習系列的一個開篇，從零開始學習 React Native 。我儘量不偷懶，保證文章及時更新。

準備工作

1. 操作系統：當前僅支持 OS X；
2. 由於 atom 的 package 服務 apm 國內不可用，因此國內的朋友需要做好 Cross the Wall 的準備。

基本開發環境搭建

安裝 Homebrew

Homebrew 是一個方便開發者在 MAC OS X 系統上面安裝 Linux 工具包的 ruby 腳本，如果你的機器還沒有安裝 Homebrew ，則需要執行下面的命令安裝：

1	$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

完成後可以試試執行 brew -v 檢查下 brew 是否安裝成功。

如果你的機器已經安裝過 Homebrew ，強烈建議 對 Homebrew 的包做一下更新：

1	$ brew update && brew upgrade

安裝 Node.js

建議使用 Node 的版本管理器 nvm 來安裝新版本的 Node.js 。

安裝 nvm

首先需要安裝 nvm 。官方推薦的做法是通過 curl 或者 wget 來安裝：

通過 curl 安裝

1 2	$ brew install curl # 確保安裝了 curl $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

通過 wget 安裝

1 2	$ brew install wget # 確保安裝了 wget $ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

完成後可以試試執行 nvm --version 檢查下 nvm 是否安裝成功。

安裝 Node.js

使用 nvm 安裝 Node.js：

1	$ nvm install node && nvm alias default node

安裝 watchman

watchman 是 Facebook 的一個用於監控文件變更並觸發指定操作的工具：

1	$ brew install watchman

安裝 flow

Flow 是一個 JavaScript 的靜態類型檢查器，建議安裝它，以方便找出代碼中可能存在的類型錯誤：

1	$ brew install flow

安裝 Android SDK

如果你之前已經裝過 Android SDK ，打開 Android SDK Manager，確保如下工具和開發包已經安裝：

SDK：

• Android SDK Build-tools version 23.0.1
• Android 6.0 (API 23)
• Android Support Repository

模擬器：

• Intel x86 Atom System Image (for Android 5.1.1 - API 22)
• Intel x86 Emulator Accelerator (HAXM installer)

如果之前沒有裝過 Android SDK ，可以通過如下步驟安裝：

1. 安裝最新的 JDK.
2. 使用 brew install android-sdk 來安裝安卓 SDK。
3. 將它添加到 ~/.bashrc, ~/.zshrc 或者任何其他您的 shell 所使用的路徑：export ANDROID_HOME=/usr/local/opt/android-sdk
4. 啓動一個新的 shell 並且運行 android ，在出現窗口中勾選上面列出的 SDK 和模擬器。
5. 點擊 “Install Packages”。

詳細介紹可以參考 這篇文章 。

安裝 React Native

最後到了關鍵一步，安裝 React Native：

1	$ npm install -g react-native-cli

至此完成 React Native 基本開發環境的搭建。

Nuclide IDE 的安裝和配置（可選）

Nuclide 是 Facebook 專門爲 React 開發的 IDE ，既然是官方提供的 IDE ，就意味着擁有更好的語法補全、類型檢查等支持。爲了開發效率，不妨嘗試一下這個 IDE 。

安裝 Atom

本質上，Nuclide 其實是在 Atom 的基礎上提供的一系列插件集。要使用 Nuclide ，首先需要先安裝 Atom 。Atom 是 Github 所推出的一個開源編輯器，其最大的特點是使用 node.js 來作爲其插件語言。

到Atom的官網下載 Atom 並安裝。

安裝 Nuclide

安裝完 Atom 後，打開 Settings 面板，並點擊 Install 選項卡，然後在搜索框中鍵入 nuclide-installer ，如圖所示：

搜索 nuclide-installer

第一個結果就是我們需要安裝的插件，點擊該插件旁邊的藍色 Install 按鈕進行安裝。

另一種方法是直接利用 Atom 的包管理器 apm 安裝：

1	$ apm install nuclide-installer

完成後重啓一下 Atom ，Atom 就會開始完成對 Nuclide 所有插件的下載安裝，這個過程可能耗時比較長。完成後可以再次進入 Setting 面板，並點擊 Packages 選項卡，你將可以看到一堆的 Nuclide- 開頭的插件。

爲了方便編譯 React Native 的工程，建議再安裝一個終端插件，用於快速打開終端並定位到當前項目根路徑。根據你的操作系統版本選擇安裝如下插件之一：

• atom-terminal：適合 Mac OSX 10.9 （Mavericks） 及以下的操作系統；
• atomerinal：atom-terminal 在 Mac OSX Yosmite 和 EI Capitan 下不能準確定位路徑，這個插件是對 atom-terminal 的 fork 和修改，適合版本更高的操作系統；

其他推薦插件

除了 Nuclide 之外，還可以根據你的需求安裝其他的一些插件，這裏推薦一些插件：

• react：React 的語法補全和智能重排；
• react-snippets：React 的代碼段；
• highlight-selected：高亮當前雙擊選中的標記；
• jshint：檢查 JavaScript 的語法，支持 JSX （需要在插件設置中開啓 Support Linting JSX）；
• emmet：用 emmet （Zen Coding）方式快速編寫頁面；
• save-session：讓 Atom 記住上一次打開的會話；
• browser-plus：在 Atom 中內嵌一個瀏覽器窗口，方便頁面調試（其實 Atom 本身就是一個瀏覽器）；
• minimap：如果你對 Sublime Text 的 minimap 念念不忘；
• atomic-emacs：Emacs 鍵盤佈局，適合 Emacs 用戶使用；
• vim-mode：Vim 鍵盤佈局，適合 Vim 用戶使用。

但要注意，Atom 目前的性能還比較差強人意，安裝太多的插件會影響整個編輯器的啓動速度，所以建議只安裝必需的插件。

第一個小程序：AwesomeProject

執行如下命令生成一個工程：

1	$ react-native init AwesomeProject

該命令將會下載 React Native 工程源碼和依賴，生成的工程文件如下圖所示：

生成的示例工程

仔細觀察這個工程，你會發現如下的內容：

• node_modules 文件夾，這是 Node.js 用來存放和管理 npm 包的文件夾，現在這裏包含了 React Native 框架。
• index.android.js 文件和 index.ios.js 文件。這是 React Native CLI 工具分別爲 Android 和 iOS 創建的空殼應用。
• android 文件夾和 ios 文件夾。包含了用於生成兩個平臺的 App 的 Bootstrap 型項目。

現在打開 Atom ，點擊 File 菜單的 【Add Project Folder…】 菜單項，導入 AwesomeProject 工程文件夾，如下圖所示：

通過終端插件快速打開終端（快捷鍵是 Alt + Shift + t），然後執行如下命令運行 Android 應用程序：

1	$ react-native run-android

React Native 會開始構建這個工程，同時會啓動 Running Packager 用於調試。如下圖所示：

如果 Running Packager 提示 “Packager can’t listen on port 8081” ，說明 8081 端口被佔用，可以檢查是什麼程序佔用了這個端口並殺掉它：

1 2	$ sudo lsof -n -i4TCP:8081 | grep LISTEN $ kill -9 <進程id>

構建完成後，手機或模擬器將會自動運行這個 App 。如果你看到的是這樣的畫面：

你還需要進行如下設置：

1. 更新 brew 和 watchman ：brew update && brew upgrade watchman；
2. 搖動手機或按下菜單按鈕呼出菜單，然後點擊 【DeviceID Settings】 菜單項進入應用的選項界面，再點擊 【Debug server host for device】 選項，填入你的 Mac 主機的 ip ；
3. 完成後重啓一下應用，或者回到主界面再次呼出菜單，點擊 【Reload JS】 。應用就會開始抓取主機上的 JS Bundle 並顯示如下的界面：

我們的第一個應用就成功執行起來了！

現在試試對我們的工程做點改動。在 Atom 下打開 index.android.js 文件，並將第 20 行附件的

1	Hello World!

改成

1	Hello HaHack!

然後再次呼出菜單，點擊 【Reload JS】 刷新下界面，此時界面中的 Hello World! 就變成了 Hello HaHack! ：

Hello HaHack

小技巧

添加 Alias

React Native 運行一個 App 的命令有點長，可以爲其編寫一些 Alias ，節省時間，方便記憶。將下面兩行代碼添加到你的 Shell 配置文件中（.bashrc 或 .zshrc）：

1 2	alias rna="react-native run-android" alias rni="react-native run-ios"

完成後重新打開終端，即可使用 rna 命令運行 React Native for Android 項目，用 rni 命令運行 React Native for iOS 項目。

自動刷新界面

如果希望每次修改 JS 腳本後自動刷新應用的界面，可以再次進入應用的選項界面，把 【Auto reload on JS Change】 選項打開：

這樣當 watchman 發現你的 JS 文件發生更改時，就會讓 Running Packager 重新加載應用的界面。