本文基本步驟是參考RN中文官網結合自己實際搭建體驗而來,由于Chocolatey被墻,所以python2和nodejs直接分別在對應的官方網站下載安裝的。
下面正式介紹從零開始搭建react native的Windows開發環境。
首先準備Android的環境,如果你是寫Android native的開發者可以直接忽略1,2步直接到第3步。
1. 安裝Java 的JDK
官網地址http://www.oracle.com/technetwork/java/javase/downloads/index.html
要求1.8及以上。你可以在命令行中輸入javac -version
來查看你當前安裝的JDK版本
然后配置Windows上JDK的變量環境,設置三個系統變量,分別是JAVA_HOME,Path和CLASSPATH。
- JAVA_HOME
先設置這個系統變量名稱,變量值為JDK在你電腦上的安裝路徑:C:\Program Files\Java\jdk1.8.0_20
。創建好后則可以利用%JAVA_HOME%
作為JDK安裝目錄的統一引用路徑。 - Path
PATH屬性已存在,可直接編輯,在原來變量后追加:;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
。 - CLASSPATH
設置系統變量名為:CLASSPATH 變量值為:;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
。
你需要關閉現有的命令符提示窗口然后重新打開,這樣新的環境變量才能生效。
2.安裝Android Studio
Android 中文官網
https://developer.android.google.cn/studio/index.html
Android Studio包含了運行和測試React Native應用所需的Android SDK和模擬器。
除非特別注明,請不要改動安裝過程中的選項。比如Android Studio默認安裝了
Android Support Repository
,而這也是React Native必須的(否則在react-native run-android
時會報appcompat-v7包找不到的錯誤)。
- 確定所有安裝都勾選了,尤其是
Android SDK
和Android Device Emulator
。 -
安裝完成后,在Android Studio的歡迎界面中選擇Configure | SDK Manager。
- 在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
。
-
在SDK Tools窗口中,選擇
Show Package Details
,然后在Android SDK Build Tools
中勾選Android SDK Build-Tools 23.0.1
(必須是這個版本)。然后還要勾選最底部的Android Support Repository
.
確保ANDROID_HOME環境變量正確地指向了你安裝的Android SDK的路徑。
打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建
具體的路徑可能和下圖不一致,請自行確認。
你需要關閉現有的命令符提示窗口然后重新打開,這樣新的環境變量才能生效。
3.Python 2
注意目前不支持Python 3版本。
4.Node
官網地址:https://nodejs.org/en/
最好是4.1以上版本,可以通過node -v
的命令來測試NodeJS是否安裝成功。
安裝完node后建議設置npm鏡像以加速后面的過程(或使用科學上網工具)。注意:不要使用cnpm!cnpm安裝的模塊路徑比較奇怪,packager不能正常識別!
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
5.Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模塊的下載。React Native的命令行工具用于執行創建、初始化、更新項目、運行打包服務(packager)等任務。
npm install -g yarn react-native-cli
安裝完yarn后同理也要設置鏡像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
安裝完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install --save 某第三方庫名。
注意:目前npm5(發文時最新版本為5.0.4)存在安裝新庫時會刪除其他庫的問題,導致項目無法正常運行。請盡量使用yarn代替npm操作。
6.推薦安裝的工具
Genymotion
比起Android Studio自帶的原裝模擬器,Genymotion是一個性能更好的選擇,但它只對個人用戶免費。
- 下載和安裝Genymotion(genymotion需要依賴VirtualBox虛擬機,下載選項中提供了包含VirtualBox和不包含的選項,請按需選擇)。
- 打開Genymotion。如果你還沒有安裝VirtualBox,則此時會提示你安裝。
- 創建一個新模擬器并啟動。
- 啟動React Native應用后,可以按下F1來打開開發者菜單。
7.測試安裝
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
提示:你可以使用
--version
參數創建指定版本的項目。例如react-native init MyApp --version 0.44.3
。注意版本號必須精確到兩個小數點。
成功后的界面如下:
但不幸的是,筆者首次運行出現如下錯誤:
react-native run-android installDebug failed
報DeviceException Could not create ADB Bridge
錯誤
Execution failed for task ':app:installDebug'.
>com.android.builder.testing.api.DeviceException: Could not create ADB
Bridge. ADB location: /Applications/ADT/sdk/platform-tools/adb
- 解決方法
這是Genymotion的默認SDK路徑是它自己的ADB路徑,而非我們常用的ADB。修改下路徑就好了。
Genymotion修改的地方在:settings-> ADB-> Use custom SDK tools
.