我用的是windows平臺,所以這兒只介紹Win平臺的環境搭建。
必要軟件安裝
1.node.js
左邊8.11.1LTS爲穩定版,右邊爲最新版,隨便下載一個即可。我下載的是10.0.0版本。
下載完成後安裝,可以一路安裝下去,當然了安裝目錄默認爲C盤,可以更換到D盤。
安裝完成後使用cmd命令:node -v,如圖顯示版本號即爲安裝成功。
安裝好以後,請設置一下node的鏡像下載地址,改爲國內的地址。這個地址爲淘寶提供的鏡像,速度比較快。
直接在cmd命令裏面鍵入這兩條命令即可。
1 2 | npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global |
2.安裝React Native命令行工具
安裝這個很簡單,因爲安裝了node了,直接打開cmd命令,鍵入以下安裝代碼即可
1 | npm install -g react-native-cli |
3.Android Studio
由於win平臺只能開發安卓版本的app,所以還是用Android Studio來的實在。
首先需要安裝java環境,需要JAVA JDK 1.8以上版本
下載地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
選擇符合自己電腦的jdk即可。如果你覺得上面去選擇麻煩,那麼點擊這兒直接下載64位的JDK
安裝完成後,你的C:\Program Files (x86)\Java目錄裏面應該有這兩個文件夾,只要是1.8開頭的就行了,後面的版本號不用在意
接着安裝Android Studio,下載地址轉站國內的網站:http://www.android-studio.org/
現在國內提供的版本最新爲3.0.1,直接點擊下載即可,只要是Android Studio2.0版本以上就能搞了
下載安裝後,需要下載Android SDK。在歡迎界面選擇菜單,選擇SDK Manger(PS:軟件纔開始安裝的界面背景是白色的,我這兒已經設置了主題,不用在意)
接着需要我們來配置SDK了。首先第一個,記住SDK的目錄,我這兒的目錄爲D:\Android\SDK。大家最好不要設置到C盤,因爲SDK文件太大了,C盤容易造成磁盤空間不足,可以設置到其他的目錄,另外目錄不能包含中文和空格
勾選右下角的Show Package Details選項,即可顯示所有的SDK版本。我們選擇react nactive支持的SDK6.0版本
接着選擇SDK Tool選項,選擇支持的23.0.1版本,其他不用勾選,圖上面的是我開發其他安卓版本自動下載的。到時候大家開發其他版本的時候會自動提示的。
接着拉到最下面,選擇如圖中的Tools,有SDK管理器,還有CPU虛擬化的工具,當然是你是AMD的處理器,就不用選Intel X86那一個。
選擇完以後,點擊OK,就會彈出窗口,讓他慢慢下載。其實下載這個東西不用翻牆,速度挺快的。
環境變量的設置
安裝上面的軟件搞定以後,需要配置一下環境變量。
我的電腦右鍵-屬性-高級系統設置-環境變量
點擊新建,ANDROID_HOME變量,設置目錄爲SDK目錄,這個目錄就是之前下載SDK的目錄。
添加好後,雙擊Path項目編輯,再添加兩條數據,一個是tools目錄和platform-tools目錄。
構建第一個React Nactive項目
完成上述操作後,運行cmd命令,然後切換到一個非中文和空格的目錄,準備創建一個項目
如圖,我在打算在F:\code\ReactNative目錄下創建項目,自行選擇目錄即可
鍵入以下代碼
1 | react-native init FirstProject |
其中FirstProject爲項目名稱,自行修改即可
現在就等着吧,讓他慢慢下載,差不多要等個10分鐘左右,如圖爲正在下載
下載完成後,就可以看到你的目錄下面出現一個目錄了,這個就是下載好以後的react nactive項目了,其中我們需要關注的目錄是android這個目錄文件夾了。
使用Android Studio打開這個目錄
等構建完成,這兒最好開啓翻牆軟件,因爲要下載很多gradle文件,相當的慢。
然後啓動一個模擬器,如何設置模擬器請自行百度。我這兒使用的是第三方模擬器。
又要等着慢慢的構建,等待構建完成,自動安裝到模擬器上面。安裝完成後,應該會遇到第一個錯誤啦
新版本文件名已經從index.android.js變爲了index.js;然而並沒有使用asset存放index.android.bundle等文件。所以需要我們手動設置
按照步驟:
進入項目的android\app\src\main 新建assets文件夾
然後鍵入如下命令
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
完成後,重新運行APP,先停止運行,再運行
運行成功後效果如圖
至此,整個環境就搭建完成了。
當然了,後續要完整的跑起來所有項目
還需要安裝git和Python 2,請自行下載即可。