React Native Android 開發環境搭建，只需4步

碼個蛋發表於2016-10-25
React NativeAndroid開發環境

原文連結：
motalks.cn/2016/10/23/…

轉載請註明來源。

自己在搭建 React Native Android 版開發環境的時候，參考了很多文章，發現多數文章提供的資料過於繁雜，對於一個常年用真機除錯的 Android 開發者來說，React Native 開發環境的搭建是可以更簡單的。此文受用的物件是使用 Mac 以及真機除錯的 Android 開發人員。最好確保你有個健全的網路（你懂的）。

在 Mac 的環境下，搭建 React Native Android 開發環境搭建只需要下面4步。

  1. 安裝 Homebrew 套件管理器
  2. 安裝 Node.js
  3. 安裝 React Native 的命令列工具
  4. ANDROID_HOME 的環境變數配置

Homebrew

號稱是 MacOS 不可或缺的套件管理器，反正就是你可以用它來下載安裝 Node.js , React Native 命令列工具的工具。Homebrew 的中文介紹點這裡。開啟 Mac 終端，輸入如下命令安裝：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"複製程式碼

安裝完成後輸入：

brew -v複製程式碼

若顯示出了 Homebrew x.x.x 則標識安裝成功。 如果你不確認之前是否已經安裝了 Homebrew 也可以使用該命令來檢測。

注：在Max OS X 10.11（El Capitan)版本中，homebrew在安裝軟體時可能會碰到/usr/local目錄不可寫的許可權問題："EACCES: permission denied" 。可以使用下面的命令修復：

sudo chown -R `whoami` /usr/local複製程式碼

Node.js

這玩意官網的介紹是：一個基於 Chrome V8 引擎的 JavaScript 執行環境。從概念上講就類似 Java 的 JRE 了。

接下來就可以使用 Homebrew 來安裝 Node.js 了，命令如下：

brew install node複製程式碼

React Native 中文網教程寫到 “React Native需要NodeJS 4.0或更高版本，本文釋出時Homebrew預設安裝的是6.x版本，完全滿足要求。”

我們使用下面這個檢查 Node.js 版本號的命令來驗證下。 

node -v複製程式碼

我的結果的是 v4.1.2 ，不知道是教程的問題還是我安裝時選擇的不同選項的問題。注：Node.js 官網也提供兩個版本，一個是 LTS 長期提供支援的穩定版本，目前為 v4.6.0。另一個是當前最新版本，目前為 v6.8.1。v4.1.2 好歹還能用，先不糾結這個，繼續下一步。

React Native 的命令列工具（react-native-cli）

沒什麼好說的，React Native 的命令列工具用於執行建立、初始化、更新專案、執行打包服務（packager）等任務。安裝命令如下：

npm install -g react-native-cli複製程式碼

環境變數配置

英文官網對 Android Studio 和 JDK 並沒有提出具體的版本要求，大家可以用自己現有的開發環境試試。

ANDROID_HOME 環境變數 ：確保ANDROID_HOME環境變數正確地指向了你安裝的Android SDK的路徑。具體的做法是把下面的命令加入到~/.bash_profile檔案中。而小數點開頭的檔案在Finder中是隱藏的，並且這個檔案有可能並不存在。請在終端下使用sudo vi ~/.bash_profile命令建立或編輯。

關於 vi 操作，自己是真的不熟悉，現在摘錄一段基本操作。以避免大家在這浪費太多時間。進入 vi 編輯頁面後，此時是出於命令列模式，是無法輸入文字的。這時候按下 i 鍵，切換到—INSERT—模式，進行編輯操作。編輯完後，按 esc 鍵退出到命令列模式。按下 ：冒號鍵進入 Last line mode。輸入 wq 進行存檔退出。

熟悉操作後，在 .bash_profile 檔案中加入下面兩行程式碼 ( 注：~表示使用者目錄，即/Users/你的使用者名稱/ ) ，可以使用echo $ANDROID_HOME檢查此變數是否已正確設定。

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools複製程式碼

簡單來說，使用真機除錯的同學，React Native 開發環境就已經搭建完畢了。下面就可以進行 React Native 專案測試了。

測試你的第一個 React Native 專案

先初始化一個名為 AwesomeProject (可用任意名稱替換 ) 的 RN 專案，後進入該專案的目錄，輸入執行命令等待部署執行即可。命令如下：

react-native init AwesomeProject 
cd AwesomeProject
react-native run-android複製程式碼

現在你已經成功的執行了第一個 RN 專案，我們可以嘗試下修改下。

在 AwesomeProject 資料夾下找到 index.android.js 檔案，可以將 Hello, World 字串改為任意字元，然後搖一搖手機，會出現配置選單，選擇 Reload js，你剛剛的修改就會立馬生效。是不是已經體會到了 RN 的神奇了？

真機執行的注意事項以及你可能會遇到的問題

(Android 5.0及以上)使用adb reverse命令

注意，這個選項只能在5.0以上版本(API 21+)的安卓裝置上使用。

首先把你的裝置通過USB資料線連線到電腦上，並開啟USB除錯（關於如何開啟USB除錯，參見上面的章節）。

  1. 執行adb reverse tcp:8081 tcp:8081
  2. 不需要更多配置，你就可以使用Reload JS和其它的開發選項了。
(Android 5.0以下)通過Wi-Fi連線你的本地開發伺服器
  1. 首先確保你的電腦和手機裝置在同一個Wi-Fi環境下。
  2. 在裝置上執行你的React Native應用。和開啟其它App一樣操作。
  3. 你應該會看到一個“紅屏”錯誤提示。這是正常的，下面的步驟會解決這個報錯。
  4. 搖晃裝置，或者執行adb shell input keyevent 82，可以開啟開發者選單。
  5. 點選進入Dev Settings。
  6. 點選Debug server host for device。
  7. 輸入你電腦的IP地址和埠號（譬如10.0.1.1:8081）。在Mac上，你可以在系統設定/網路裡找查詢你的IP地址。
  8. 回到開發者選單然後選擇Reload JS。
可能會遇到的問題

問題一

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKs複製程式碼

解決辦法：把專案中的~/android/app/build.gradle中的gradle版本改為1.2.3

問題二

搖一搖手機沒辦法出現 Reload Js 設定選單

解決辦法：在小米和魅族系統中只要在應用管理的許可權管理中開啟懸浮窗許可權即可解決。

接下來的安排

React Native 整合到現有的 Android 專案

React Native 專案熱更新

React Native 優化（包大小優化，預載入解決首次載入白屏等）

相關文章