簡介
此係列的文章主要是在學習React Native官網參考資料時整理的,因爲官網寫的主要是英文,而且有些操作步驟描述的並不是很詳細,所以決定在此記錄一下,爲了後面工作開發時能進行快速開發,如果能幫助到剛入門的小夥伴,那就更開心了。
安裝部署所用軟件及安裝包
- Node(高於8.3版本)
- Python(必須爲2.X)
- jdk(版本必須爲1.8)
- Android Studio(默認最新版)
安裝部署操作步驟
1、Node環境安裝部署(高於8.3)
1.1、打開地址“https://nodejs.org/en/download/”來下載相應版本的安裝包,如下:
1.2、安裝過程略。一路點擊Next即可,中間如果有需要的話更改下安裝路徑,其餘的全部默認,但是在安裝過程中有個地方需要注意:
記得勾選上面框選中的選項,它會自動配置node的系統變量,安裝完成後你無需自己配置。
1.3、安裝完成後打開命令行工具,輸入以下命令測試:
2、Python環境安裝部署(2.X)
2.1、打開地址“https://www.python.org/downloads/”下載相應安裝包,然後雙擊安裝,如圖:
2.2、安裝過程略。同樣的,期間也要勾選如圖所示的選項,實現自動配置python路徑(最下面一項):
2.3、安裝完成後,命令行通過以下命令進行測試:
3、jdk環境安裝部署(1.8版本)
3.1、打開地址“https://www.oracle.com/technetwork/java/javase/downloads/index.html”來選擇下載相應的安裝包,如圖:
3.2、安裝過程略。安裝期間會彈出兩次選擇路徑的界面,第一次是jdk的安裝路徑,第二次是jre的安裝路徑,可以自行選定,然後一路Next。
3.3、安裝完成之後我們進行java的環境部署,請參考文章“https://blog.csdn.net/qq_35117024/article/details/86085067”中的新建系統變量部分,部署完成後命令行輸入以下命令進行測試:
4、Android Studio安裝部署
4.1、打開地址“https://developer.android.com/studio/index.html”下載安裝包,然後安裝軟件,安裝路徑中的文件夾名稱不允許有空格。
4.2、安裝過程略。安裝完成之後,選擇運行此軟件,第一次運行時會彈出配置界面,選擇【cancel】,如圖:
然後選擇定製安裝,安裝所需的組件,在此處確保安裝以下的組件:
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM) (AMD 處理器看這裏)
- Android Virtual Device
如圖(此圖並沒有列出SDK Platform):
安裝配置完成後,我們在軟件啓動界面選擇【Configure】,在 SDK Manager 中選擇"SDK Platforms"選項卡,然後在右下角勾選"Show Package Details"。展開Android 9 (Pie)選項,確保勾選了下面這些組件(重申你必須使用穩定的翻牆工具,否則可能都看不到這個界面):
- Android SDK Platform 28
- Intel x86 Atom_64 System Image(官方模擬器鏡像文件,使用非官方模擬器不需要安裝此組件)
然後點擊"SDK Tools"選項卡,同樣勾中右下角的"Show Package Details"。展開"Android SDK Build-Tools"選項,確保選中了 React Native 所必須的28.0.3版本。你可以同時安裝多個其他版本。
最後點擊"Apply"來下載和安裝這些組件。
4.3、配置環境變量
添加系統環境變量,然後指定android sdk的安裝路徑,如圖:
然後在系統級變量“Path”中添加platform-tools的目錄。
5、新建第一個項目
5.1、進入相應的文件夾,然後打開命令行工具,通過命令:
react-native init myfirstapp
來創建一個react native應用,然後我們進入到這個文件夾發現,在它裏面有ios和android的兩個文件夾,如圖:
5.2、通過Android Studio來打開這個android文件夾,然後在軟件的右上角點擊【AVD Manager】來創建一個虛擬設備,參數默認,如圖:
5.3、在新建的虛擬設備列表後面有個綠色的三角形,我們點擊它來啓動這個虛擬設備,如圖:
5.4、然後在命令行進入我們項目的根目錄,通過命令:
react-native run-android
來啓動,然後在虛擬設備就可以看到效果,如圖:
5.5、到此爲止,我們介紹了React Native的開發環境部署及第一個實例的創建運行工作,後面繼續介紹在真機中如何運行以及更多開發方法。
總結
本文從所需安裝開始介紹,大致介紹了開發環境如何部署以及第一個demo的編寫運行,其中Android Studio的安裝部署部分介紹的可能不是很詳細,因爲在部署過程中並沒有及時截屏,所以僅僅抓取了幾張關鍵的圖片,各位如果遇到問題,歡迎騷擾~