1. 程式人生 > WINDOWS開發 >Windows10 準備/安裝React研發環境

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

官網:https://nodejs.org/zh-cn/

驗證安裝

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://download.oracle.com/otn/java/jdk/8u231-b11/5b13a193868b4bf28bcb45c792fce896/jdk-8u231-windows-x64.exe?AuthParam=1592777279_872afabc0b8f3c448139b89be53a63a6

官網: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

Android Studio最新版下載:https://r8---sn-2x3een76.gvt1.com/edgedl/android/studio/install/4.0.0.16/android-studio-ide-193.6514223-windows.exe?cms_redirect=yes&mh=7O&mip=113.87.118.71&mm=28&mn=sn-2x3een76&ms=nvh&mt=1592771414&mv=m&mvi=7&pl=17&shardbypass=yes

官網: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

技術分享圖片

技術分享圖片

技術分享圖片