React Native 入門筆記一 -- Windows下基本環境配置


一、准備工作

首先,需要安裝nodejs,可以從nodejs官網下載,注意,React Native 要求node版本在4.0或以上;否則會出錯,我建議把node版本升到最新版本,防止后面出現各種莫名其妙的問題,我這里安裝的版本是v6.9.3LTS的,安裝之后npm也一並安裝好了,可以運行命令查看當前node版本和npm版本;

node -v
v6.9.2

npm -v
3.10.9

注意:由於眾所周知的原因,國內一些網站無法打開,所以建議先打開VPN等翻牆軟件,我這里用的是藍燈,這里一定要注意,否則后面的步驟無法進行; 

二、正式開始

安裝Android Studio並配置Android虛擬機

1、下載Android Studio安裝包,然后進行安裝,安裝的過程很簡單,直接點下一步即可;安裝的過程可能要等待數十分鍾,直到點Finish完成;

2、進行環境變量的配置:

a、添加ANDROID_HOME環境變量:

b、將Android SDK的Tools目錄添加到PATH變量中

你可以把Android SDK的tools和platform-tools目錄添加到PATH變量中,以便在終端中運行一些Android工具,例如android avd或是adb logcat等。

3、打開命令行窗口,輸入android,進入到Android SDK Manger,下載我們需要的SDK;

  • Tools/Android SDK Tools (24.3.3)

  • Tools/Android SDK Platform-tools (22)

  • Tools/Android SDK Build-tools (23.0.1)(這個必須版本嚴格匹配23.0.1

  • Android 6.0 (API 23)/SDK Platform (1)

  • Extras/Android Support Library(23.0.1)

  • Extras/Android Support Repository

4、切換到Android 6.0選項卡,注意:必須選擇這項,因為React Native目前必須要這個版本的,然后就是等待下載並安裝,安裝完成后關閉就行,Android SDK Build-tools必須選擇23.0.1,否則后面會出現錯誤 ;

5、下載進行安卓虛擬機的配置,當然,也可以用真機進行測試,首先打開Android Studio,新建一個空白工程,根據實際需要,選擇合適的工程目錄(project location),強列建議工程目錄不要建在C盤,我這里選擇的是D盤,其它的采用默認配置即可;

6、點擊頂部菜單欄手機圖標進行下一步,選擇一個模擬設備;

7、點擊上圖中綠色的三角圖標,就可以打開虛擬機了; 

8、至此,Android相關的配置工作就結束了,下面進行React Native工程的構建; 

三、創建React Native工程

1、打開命令行窗口,在彈出的命令框當中輸入以下指令,回車

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

2、可以運行下面命令,查看NPM庫是否切換為阿里源;

npm config get registry

3、安裝react-native命令行工具

npm install -g react-native-cli

4、創建項目,進入工作目錄,運行

cd D:\react-native-demos
react-native init AwesomeProject

並耐心等待數(或數十)分鍾。

5、運行packager

react-native start

可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的腳本(看到很長的js代碼就對了)。第一次訪問通常需要十幾秒,並且在packager的命令行可以看到形如[====]的進度條。

6、運行模擬器,保證模擬器處於打開狀態;

7、安卓運行,保持packager開啟,另外打開一個命令行窗口,然后在工程目錄下運行

react-native run-android

首次運行需要等待數分鍾並從網上下載gradle依賴。最好提前把VPN等翻牆軟件打開,確保網絡連接狀態良好可以下載;運行完畢后可以在模擬器或真機上看到應用自動啟動了。

成功后手機界面:

8、接下來就可以用Android Studio或者Webstorm等開發工具進行開發了!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM