ReactNative+AndroidStudio環境搭建___Windows系統

ReactNative+AndroidStudio環境搭建___Linux系統

一、搭建開發環境

根據你所使用的操作系統、針對的目標平臺不同，具體步驟有所不同。如果想同時開發iOS和Android也沒問題，你只需要先選一個平臺開始，另一個平臺的環境搭建只是稍有不同。

二、安裝必需的軟件

• Python 2 官網下載

注意目前不支持Python 3版本。

• Node 官網下載

• Android Studio

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

Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中輸入 javac -version
來查看你當前安裝的JDK版本。如果版本不合要求，則可以到 官網上下載。 或是使用包管理器來安裝（比如choco install jdk8或是 apt-get install default-jdk）

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

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

• 確定所有安裝都勾選了，尤其是Android SDK和Android Device Emulator。

• 在初步安裝完成后，選擇Custom安裝項：

custom installation

• 檢查已安裝的組件，尤其是模擬器和HAXM加速驅動。

verify installs

• 安裝完成后，在Android Studio的歡迎界面中選擇Configure | SDK Manager。

configure sdk

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

platforms

• 在SDK Tools窗口中，選擇Show Package Details，然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須是這個版本）。然后還要勾選最底部的Android Support Repository.

build tools

三、ANDROID_HOME環境變量

• 確保ANDROID_HOME環境變量正確地指向了你安裝的Android SDK的路徑。

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建

具體的路徑可能和下圖不一致，請自行確認。

env variable

你需要關閉現有的命令符提示窗口然后重新打開，這樣新的環境變量才能生效。

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

你可以把Android SDK的tools和platform-tools目錄添加到PATH變量中，以便在終端中運行一些Android工具，例如android avd或是adb logcat等。

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 選中PATH -> 雙擊進行編輯

注意你的具體路徑可能和下圖不同

env variable

五、測試安裝

react-native init ReactNative01
cd ReacNative01
npm install
npm start
react-native run-android

提示：你可以使用--version參數創建指定版本的項目。例如react-native init MyApp --version 0.39.2
。注意版本號必須精確到兩個小數點。

Windows用戶請注意，請不要在命令行默認的System32目錄中init項目！會有各種權限限制導致不能運行！

六、修改項目

現在你已經成功運行了項目，我們可以開始嘗試動手改一改了：

• 使用你喜歡的文本編輯器打開index.android.js并隨便改上幾行
• 按兩下R鍵，或是用Menu鍵（通常是F2，在Genymotion模擬器中是?+M）打開開發者菜單，然后選擇 Reload JS 就可以看到你的最新修改。
• 在終端下運行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的應用的日志。

完成了！
恭喜！你已經成功運行并修改了你的第一個React Native應用。

接下來如果你想要在真機上運行應用，請參閱在設備上運行。

如果你碰到了一些問題，請參閱常見問題。