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

原文連接：
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 優化（包大小優化，預加載解決首次加載白屏等）