React Native設定Android開發環境 - macOS與Windows


以官網說明來設定React Native的Android開發環境時應該是很簡單,但對剛開始的使用者最困難的地方,可能是在環境變數的設定,這篇文章是一些實際安裝過程的細部說明。

首先是電腦配備的部份,建議使用Intel的CPU(儘量但非必要)的電腦,8GB以上的記憶體。因為Intel CPU的電腦可以使用具有硬體加速技術的Android模擬器,如果使用AMD CPU的話,則要改用像Genymotion模擬器,不然ARM系統的模擬器開啟可能會等到天荒地老。

註: macOS(Mac OS X)電腦一定都是使用Intel的CPU

有些步驟雖然並非絕對必要,但為了讓你在使用的過程中減少問題的發生,請還是按照步驟來進行。我自己在過程中有發生許多問題,把它們列在最後面,當然你也有可能發生各種問題,請記得把錯誤或相關的訊息複製下來,網路上使用的人很多,相信9成以上都可以找到解決方法。

以下分成兩個不同的平台,一個是macOS(Mac OS X),另一個是Windows(使用Windows 10 64位元)。

macOS(Mac OS X)

1. 安裝node與watchman

官網的說明是用Homebrew來安裝,的確也是最方便的方式,不過你的電腦上要先裝上Homebrew就是:

brew install node
brew install watchman

node.js另外其他多種安裝方式,例如:

我個人是使用nvm安裝,主要需要有多個Node.js版本切換,而且要常常升級的需求。如果你並沒有打算在電腦中開發Node.js的應用,用Homebrew或從官網下載安裝程式來安裝即可。

watchman是Facebook出品的一個開源碼工具程式,用來監控檔案更動,然後觸發某些動作(例如重新打包應用)的輔助工具。這個程式目前只支援macOS(Mac OS X)與Linux。也有另外其他幾種安裝方式,用Homebrew的方式是最簡單的。

2. 安裝JDK(Java SE Development Kit)

安裝最新(1.8)版本的,連到Oracle的網站下載安裝包與安裝。

設定JAVA_HOME環境變數:

用終端機工具(命令列工具)輸入(需輸入管理密碼):

sudo nano ~/.bash_profile

加入以下這行在.bash_profile檔案中:

export JAVA_HOME="$(/usr/libexec/java_home)"

3. 安裝Android Studio

安裝最新版本的,連到Android Studio官網下載安裝包與安裝。

註: Android Studio只是裝來用裡面的SDK和管理程式,暫時並不會用到它來開發。下面都使用指令來進行作業就好。

安裝好需要先作路徑(PATH)的設定,用終端機工具(命令列工具)輸入(需輸入管理密碼):

sudo nano ~/.bash_profile

加入以下這行在.bash_profile檔案中:

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

重啟終端機工具(命令列工具)後,就可以輸入下面的指令,這會開啟Android SDK manager:

android

勾選要需要多安裝的,其他的就不用勾選(自動勾選的可以取消勾選,以免多花時間與空間安裝,每個模擬器約500MB):

  • Tools Android SDK Build-Tools 23.0.1
  • Android 6.0 (API 23) SDK Platform
  • Android 6.0 (API 23) Intel x86 Atom_64 System Image

註: 需要另外安裝安裝Build-Tools 23.0.1是因為目前React Native v0.35.0預設打包編譯是用這個版本,不過之後有可能會變動。

註: 模擬器可以用Genymotion模擬器,不一定要用上面的Intel x86 Atom_64,本文最後面有說明。

建立一個模擬器,輸入下面的指令來建立一個名稱為react的模擬器,會出現詢問是否要建立自訂的模擬器時按下Enter,也就是不需要(no):

android create avd -n "react" -t "android-23" --abi default/x86_64

輸入下面的指令列出目前的模擬器,應該可以看到有個叫react的模擬器:

emulator -list-avds

輸入下面的指令啟動這個react模擬器:

emulator @react

4. 安裝react-native-cli

終端機工具(命令列工具)中輸入以下指令。如果有出現Error(錯誤),在前面加上sudo然後輸入管理密碼。:

npm install -g react-native-cli

註: 要輸入sudo是因為權限的問題,實際上是可以修正的,暫時不會影響有空再修正也行。修正方法在這裡

5. 建立新的專案,然後執行

用終端機工具(命令列工具),先切換到一個目錄中,然後輸入以下指令:

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

react-native init AwesomeProject這個執行需要很長的時間(5~10分鐘)。

react-native run-android這個執行需要一點時間(3~10分鐘),記得要"先自行把模擬器啟動"(上面有指令)。除非你之前已經有用過這個模擬器,不然之後才開模擬器,裡面是不會幫你安裝開發用的這個App,如果最後沒幫你直接執行App,你要自己要找一下模擬器的App列表中,裡面有沒有叫你的專案名稱的App,像上面是AwesomeProject

上面的這兩個執行需要耗費大量的記憶體與CPU時間,如果你有開Chrome瀏覽器請先暫時關閉,防毒也先暫時關了,另外一些暫時不用到的程式(音樂、skype之類的)也暫時先關閉。

Windows (Win10)

其實步驟和上面都類似,差異只在一些基本軟體安裝與設定環境變數與PATH兩個平台的方式不同。在Windows上要使用PowerShell當終端機程式會比較好用。

1. 安裝nodejs與python2

根據React Native官網的說明是要安裝Chocolatey,但經過安裝後,我發現這個在Windows10上有很大的問題,一直沒辦法正常使用。

解決方式是既然是要裝nodejs,直接到從Node.js官網下載安裝程式,然後安裝就行了。

python2也是一樣,直接到從Python官網下載2.7.x版本,然後安裝就可以了。

註: 記得要安裝的是2.7,不要安裝3的版本。

註: 另外在安裝過程中,會有一個Advanced的選項,是要不要把python放到系統環境變數的路徑(path)中,"記得要選"。(下面有圖)

註: 這個python2是為了有些套件需要編譯才需要安裝的。

如果你能在終端機工具(命令列工具)中輸入nodenpmpython,代表應該沒問題了。

2. 安裝JDK(Java SE Development Kit)

安裝最新(1.8)版本的,連到Oracle的網站下載安裝包與安裝。

而且要加"JAVA_HOME"到系統環境變數的使用者環境變數中,指向"C:\Program Files\Java\jdk1.8.0_102"(後面是版本編號,要看你裝的是哪一個版本,要到這個目錄找一下)。

Windows的系統環境變數的設定方式,需要先找到設定位置,你可以google一下網路上的相關文章。

我個人使用的方式,都是用滑鼠對在桌面上的"本機"(個人電腦)圖示按右鍵,然後選擇"內容",裡面有一個"進階系統設定",然後再按下面的"環境變數"按鈕,就可以看到要設定環境變數的視窗。設定在使用者變數中就可以了。(下面有簡單的圖解)

3. 安裝Android Studio

安裝最新版本的,連到Android Studio官網下載安裝包與安裝。

註: Android Studio只是裝來用裡面的SDK和管理程式,暫時並不會用到它來開發。下面都使用指令來進行作業就好。

加入"ANDROID_HOME"使用者環境變數(下面的eddy改為你自己電腦的使用者名稱):

C:\Users\eddy\AppData\Local\Android\Sdk

把工具的路徑也加到"Path"使用者環境變數中(下面的eddy改為你自己電腦的使用者名稱):

C:\Users\eddy\AppData\Local\Android\Sdk\tools
C:\Users\eddy\AppData\Local\Android\Sdk\platform-tools

重啟終端機工具(命令列工具)後,就可以輸入下面的指令,這會開啟Android SDK manager:

android

勾選要需要多安裝的,其他的就不用勾選(自動勾選的可以取消勾選,以免多花時間與空間安裝,每個模擬器約500MB):

  • Tools Android SDK Build-Tools 23.0.1
  • Android 6.0 (API 23) SDK Platform
  • Android 6.0 (API 23) Intel x86 Atom_64 System Image

註: 需要另外安裝安裝Build-Tools 23.0.1是因為目前React Native v0.35.0預設打包編譯是用這個版本,不過之後有可能會變動。

註: 模擬器可以用Genymotion模擬器,不一定要用上面的Intel x86 Atom_64,本文最後面有說明。

建立一個模擬器,輸入下面的指令來建立一個名稱為react的模擬器,會出現詢問是否要建立自訂的模擬器時按下Enter,也就是不需要(no):

android create avd -n "react" -t "android-23" --abi default/x86_64

輸入下面的指令列出目前的模擬器,應該可以看到有個叫react的模擬器:

emulator -list-avds

輸入下面的指令啟動這個react模擬器:

emulator @react

4. 安裝react-native-cli

終端機工具(命令列工具)中輸入以下指令(npm工具你在安裝nodejs後就會有了):

npm install -g react-native-cli

5. 建立新的專案,然後執行

用終端機工具(命令列工具),先切換到一個目錄中,然後輸入以下指令:

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

下面是注意事項:

react-native init AwesomeProject這個執行需要很長的時間(5~10分鐘)。

react-native run-android這個執行需要一點時間(3~10分鐘),記得要"先自行把模擬器啟動"(上面有指令)。除非你之前已經有用過這個模擬器,不然後面才開模擬器的話,裡面是不會有安裝開發的App,如果沒直接執行App,你要自己要找一下App裡面有沒有叫你的專案名稱的App,像上面是AwesomeProject

上面的這兩個執行需要耗費大量的記憶體與CPU時間,如果你有開Chrome瀏覽器請先暫時關閉,防毒也先暫時關了,另外一些暫時不用到的程式(音樂、skype之類的)也暫時先關閉。

額外加演: Genymotion模擬器

Genymotion模擬器是Android模擬器的另一種選擇,支援多作業系統與執行快速,如果你是使用AMD CPU也可以享受執行效率。它只有在個人使用上是免費,商業使用要另外付費,而且免費版的模擬器限制較多,支援的API版本也會舊一點。

要先安裝Virtualbox,建議直接下載與安裝官網上最新版本,不要裝Genymotion附的,因為有可能版本過舊不能用。

先上Genymotion這裡註冊帳號,email確認後登入帳號,然後在這個Download(下載)頁面下載Genymotion主程式與安裝到電腦中。

啟動Genymotion後,選擇要使用的模擬器,使用API 23的即可,要再登入帳號才能下載模擬器。

最後需要設定一下Genymotion,讓React Native能連接上與把App裝上。

需要在Settings(設定)->ADB->選擇 "use custom Android SDK tools",指向安裝sdk的目錄:

Genymotion設定圖

Windows中sdk的目錄(下面eddy改為你自己的電腦使用者名稱):

C:\Users\eddy\AppData\Local\Android\Sdk

macOS(Mac OS X)中sdk的目錄(下面eddy改為你自己的電腦使用者名稱):

/Users/eddy/Library/Android/sdk

問題與解答

以下是我遇到的問題與解答,上面如果你都有按照步驟一步一步來,理論上不會遇到這些問題。

failed to find Build Tools revision 23.0.1

  1. 要安裝build tools 23.0.1

  2. 修改android/app/build.gradle,要改很多地方,參考問答

Execution failed for task ':app:installDebug'. com.android.builder.testing.api.DeviceException: No connected devices!

要先啟動模擬器再執行react-native run-android


Could not find tools.jar

要裝JDK(Java SE Development Kit)才行,JRE是不夠的。而且要加"JAVA_HOME"到系統環境變數中,指向"C:\Program Files\Java\jdk1.8.0_102"。


Execution failed for task ':app:installDebug'. com.android.builder.testing.api.DeviceException: Timeout getting device list.

使用Genymotion產生的問題,需要在模擬器設定->ADB->choose "use custom Android SDK tools",指向安裝sdk的目錄:

C:\Users\eddy\AppData\Local\Android\Sdk