ReactNative開發環境搭建和運行第一個項目(Win10)

我用的是windows平臺,所以這兒只介紹Win平臺的環境搭建。

必要軟件安裝

1.node.js

下載地址:https://nodejs.org/en/

左邊8.11.1LTS爲穩定版,右邊爲最新版,隨便下載一個即可。我下載的是10.0.0版本。

下載完成後安裝,可以一路安裝下去,當然了安裝目錄默認爲C盤,可以更換到D盤。

安裝完成後使用cmd命令:node -v,如圖顯示版本號即爲安裝成功。

安裝好以後,請設置一下node的鏡像下載地址,改爲國內的地址。這個地址爲淘寶提供的鏡像,速度比較快。

直接在cmd命令裏面鍵入這兩條命令即可。

2.安裝React Native命令行工具

安裝這個很簡單,因爲安裝了node了,直接打開cmd命令,鍵入以下安裝代碼即可

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目錄下創建項目,自行選擇目錄即可

鍵入以下代碼

其中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,請自行下載即可。

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