01 React Native入門——環境安裝部署

簡介

        此係列的文章主要是在學習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的安裝部署部分介紹的可能不是很詳細,因爲在部署過程中並沒有及時截屏,所以僅僅抓取了幾張關鍵的圖片,各位如果遇到問題,歡迎騷擾~

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