Windows10 準備/安裝React研發環境
安裝NodeJS環境,附帶NPM
因為React依賴NPM(Node.js Package Manager)來安裝,所以我們可以先安裝Node.Js環境。
Node.Js會自動帶NPM元件和自動安裝配套的可選元件,非常簡便。
下載NodeJs
12.81.1 LTS長期支援版:https://nodejs.org/dist/v12.18.1/node-v12.18.1-x64.msi
驗證安裝
node -v
npm -v
設定NPM映象,避免國內環境坑
國外環境你懂,所以這裡在CMD裡面我們設定下全域性節點為淘寶吧,避免後面遇到環境問題,七七八八。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
安裝React Native 命令列工具
有了前面的NPM之後,我們就可以愉快的用NPM來安裝React Nativ Cli了
npm install -g react-native-cli
PS:解除安裝可用“npm uninstall -g react-native-cli”
安裝Yarn,來加速安裝替換NPM
Yarn是Facebook 提供的替代 npm 的工具,可以加速 node 模組的下載,安裝完 yarn 之後就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install 某第三方庫名。
npm install -g yarn
同時我們也可以把yarn從官網源切換到國內節點,比如
yarn config get registry
yarn config set registry ‘https://registry.npm.taobao.org‘
安裝Native開發所需的Java SDK
下載並安裝Java SDK
如果Oracle要求你註冊賬號,你就老實註冊一個。
JDK 的版本必須是 1.8(目前不支援 1.9 及更高版本,注意 1.8 版本官方也直接稱 8 版本)
官網:https://www.oracle.com/cn/java/technologies/javase/javase-jdk8-downloads.html
設定環境變數,讓React感知Java SDK位置
React Native 需要通過環境變數來了解你的 Java SDK 裝在什麼路徑,從而正常進行編譯。
可以通過“設定 - 關於 - 右側系統資訊 - 高階系統設定 - 高階 - 環境變數 - XXXX使用者變數 - 新建”
JAVA_HOME
C:\Program Files\Java\jdkxxxxxx
同時新增Bin目錄到環境變數Path中
通過“設定 - 關於 - 右側系統資訊 - 高階系統設定 - 高階 - 環境變數 - XXXX使用者變數 - Path - 編輯 - 新建”
%JAVA_HOME%\bin
同時在系統變數中新建CLASSPATH項
CLASSPATH
.;%Java_Home%\bin;%Java_Home%\lib\dt.jar;%Java_Home%\lib\tools.jar
如果之前打開了控制檯,需要重啟控制檯,環境變數才生效。
安裝Native開發所需的Python 2.x
下載地址:https://www.python.org/ftp/python/2.7.18/python-2.7.18.amd64.msi
官網:https://www.python.org/downloads/release/python-2718/
安裝Native開發所需的Android Studio及SDK
Google良心,在國內架設了一個伺服器,這個國內網址不用額外上網就可以直接愉快下載了。
下載Android Studio
官網:https://developer.android.google.cn/studio#downloads
安裝Android Studio
一路安裝就好,幾乎沒坑,啟動介面很好看,有沒有?
安裝Android SDK
啟動介面,進入“Configure”
,找到“SDK Manager”
,或者進入主頁之後,頂部"Tools"
找到"SDK Manager"
在“SDK Platforms”
頁面,開啟右下角“Show Package Details”
,然後在Android 9.0/Android 10
勾選如圖所示的相關元件,點選“Apply”
在“SDK Tools”
頁面,開啟右下角“Show Package Details”
,然後在“Android SDK Build-Tools 30”
勾選如圖所示的相關元件(重點是React支援的28.0.3
),點選“Apply”
點選“Apply”
之後,開始下載按鈕,速度還挺完美的,好像不需要額外上網。
另外,推薦安裝一下HAXM(Intel 虛擬硬體加速驅動)
,如果沒安裝就勾選下,我這裡之前預設就安裝上了,所以就不需要再安裝了。
準備Android 模擬器
啟動介面,進入“Configure”
,找到“AVD Manager”
,或者進入主頁之後,頂部"Tools"
找到"AVD Manager"
點選“Create Virtural Device”
建立一個“AVD(Android Virtual Device,安卓虛擬裝置)”
,推薦選擇“Nexus S”
不用理會紅字警告,這裡Google當然是希望你裝帶Google Play
的版本,但是那玩意,國內根本玩不了
點選那個小三角,就是啟動了,開始醜爆模式
設定環境變數,讓React感知Android SDK位置
React Native 需要通過環境變數來了解你的 Android SDK 裝在什麼路徑,從而正常進行編譯。
可以通過“設定 - 關於 - 右側系統資訊 - 高階系統設定 - 高階 - 環境變數 - XXXX使用者變數 - 新建”
變數名:ANDROID_HOME
變數值:C:\Users\xxxxxx\AppData\Local\Android\Sdk
如果之前打開了控制檯,需要重啟控制檯,環境變數才生效。
同時新增工具目錄到環境變數Path
中
通過“設定 - 關於 - 右側系統資訊 - 高階系統設定 - 高階 - 環境變數 - XXXX使用者變數 - Path - 編輯 - 新建”
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
建立React 專案
給專案取名,比如“FirstReactApp”
請不要單獨使用常見的關鍵字作為專案名(如 class,native,new,package 等等)。請不要使用與核心模組同名的專案名(如 react,react-native 等)。請不要在目錄、檔名中使用中文、空格等特殊符號。
Windows 使用者請注意,請不要在某些許可權敏感的目錄例如 System32 目錄中 init 專案!會有各種許可權限制導致不能執行!
右鍵進入CMD用命令建立“FirstReactApp”專案
npx react-native init FirstReactApp
# 或者
react-native init FirstReactApp
編譯執行React專案
萬事俱備,只欠東風
切換到React專案目錄,執行命令列,啟動專案,只要前面步驟都完成了,基本上一氣呵成!
npx react-native run-android
# 或者
yarn android