React Native環境搭建 (android/mac環境)

React Native 環境的搭建(android\mac環境)

  • android環境搭建

android環境搭建

安裝

必需的軟件

Homebrew
Node
React Native的命令行工具
這三個軟件安裝方法參考上篇ios環境搭建的博客

Android Studio

React Native目前需要Android Studio2.0或更高版本。

Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中輸入 javac -version來查看你當前安裝的JDK版本。如果版本不合要求,則可以到 官網上下載。

Android Studio包含了運行和測試React Native應用所需的Android SDK和模擬器。

除非特別註明,請不要改動安裝過程中的選項。比如Android Studio默認安裝了 Android Support Repository,而這也是React Native必須的(否則在react-native run-android時會報appcompat-v7包找不到的錯誤)。

安裝過程中有一些需要改動的選項:

  • 選擇Custom選項

tu1

  • 勾選Performance和Android Virtual Device

tu2

  • 安裝完成後,在Android Studio的啓動歡迎界面中選擇Configure | SDK Manager。

tu3

  • 在SDK Platforms窗口中,選擇Show Package Details,然後在Android 6.0 (Marshmallow)中勾選Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

tu4

  • 在SDK Tools窗口中,選擇Show Package Details,然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1。(必須是這個版本)

tu5

ANDROID_HOME環境變量

確保ANDROID_HOME環境變量正確地指向了你安裝的Android SDK的路徑。具體的做法是把下面的命令加入到~/.bash_profile文件中:(譯註:~表示用戶目錄,即/Users/你的用戶名/,而小數點開頭的文件在Finder中是隱藏的,並且這個文件有可能並不存在。請在終端下使用sudo vi ~/.bash_profile命令創建或編輯。如不熟悉vi操作,請點擊這裏學習)

如果你不是通過Android Studio安裝的sdk,則其路徑可能不同,請自行確定清楚。

export ANDROID_HOME=~/Library/Android/sdk

然後使用下列命令使其立即生效(否則重啓後才生效):

source ~/.bash_profile

可以使用echo $ANDROID_HOME檢查此變量是否已正確設置。

推薦安裝的工具

Watchman
Flow
這兩個工具安裝同樣參考上一篇

將Android SDK的Tools目錄添加到PATH變量中

你可以把Android SDK的tools和platform-tools目錄添加到PATH變量中,以便在終端中運行一些Android工具,例如android avd或是adb logcat等。具體做法仍然是在~/.bash_profile中添加:

注意:你的SDK的具體路徑可能不同
PATH=”~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:${PATH}”
export PATH

Gradle Daemon

開啓Gradle Daemon可以極大地提升java代碼的增量編譯速度。

其他可選的安裝項

Git
Nuclide

Genymotion

比起Android Studio自帶的原裝模擬器,Genymotion是一個性能更好的選擇,但它只對個人用戶免費。

1.下載和安裝Genymotion(譯註:不要被裏面的價格唬住了,個人免費的鏈接可能不明顯,請仔細尋找!另外,genymotion需要依賴VirtualBox虛擬機,下載選項中提供了包含VirtualBox和不包含的選項,請按需選擇)。
2.打開Genymotion。如果你還沒有安裝VirtualBox,則此時會提示你安裝。
3.創建一個新模擬器並啓動。
4.啓動React Native應用後,可以按下⌘+M來打開開發者菜單。

常見問題

安裝Android Studio時無法創建虛擬設備

某些版本的Android Studio可能存在一個已知的bug,導致在安裝時無法創建虛擬設備。安裝過程中可能看到如下報錯:

Creating Android virtual device
Unable to create a virtual device: Unable to create Android virtual device

如果你碰到了這個問題,可以運行android avd來手工創建虛擬設備。
tu11

然後在AVD管理器(AVD Manager)窗口中選擇新設備並點擊Start…來啓動。

Shell命令無響應的異常

如果你碰到了下面這樣的異常):

Execution failed for task ‘:app:installDebug’.
com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException

試着將項目目錄/android/build.gradle中的Gradle版本改爲1.2.3。

touch ~/.gradle/gradle.properties && echo “org.gradle.daemon=true” >> ~/.gradle/gradle.properties

測試安裝

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

你也可以在Nuclide中打開AwesomeProject文件夾然後運行。

修改項目

現在你已經成功運行了項目,我們可以開始嘗試動手改一改了:
- 使用你喜歡的文本編輯器打開index.android.js並隨便改上幾行
- 按兩下R鍵,或是用Menu鍵(通常是F2,在Genymotion模擬器中是⌘+M)打開開發者菜單,然後選擇 Reload JS 就可以看到你的最新修改。
- 在終端下運行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的應用的日誌。

完成了

參考文章:http://reactnative.cn/docs/0.31/getting-started.html#homebrew

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章