Windows搭建react-native（RN）環境，RN版本0.55，jdk8，node12.2.0,Android Studio

前言

在一臺電腦windows上搭建react-native環境，尤其對於第一次搭建的同學來說非常非常繁瑣和複雜。以下文章我將盡可能的說好每一步該如何建立，過程中可能遇到的錯誤，也給出一些解決辦法。
讀者也一定要一步一步根據步驟來，確保自己問題是在那一步就有問題。

筆者之所以搭建此環境的原因也是因為接手有一個RN的專案，我需要將該專案跑起來，而且還要學會IOS打包和Android打包。
跑起來都不行那又怎麼打包？所以本章也介紹一下該如何把一個RN專案跑起來。

先介紹筆者用到的哪些軟體和版本：

軟體下載直通車（除了vscode）：
https://pan.baidu.com/s/1TlVzuhQ71l2GGeWZ2ozukg
提取碼：kgxs

因為原來專案的版本也不是特別高，從官方文件也可以看出，高版本的react-native版本所要求的node版本和jdk版本也是不一樣的。所以你專案對應的什麼版本最好就參考官網文件所對應的版本。我參考是0.64這個版本。要求的也就是node版本大於12，jdk版本大於1.8。

如何看你專案react-native版本是多少？

在package.json檔案裡就可以看到

安裝node

以筆者為例，在node官網找到對應的12.2.0node版本，如果讀者會nvm就直接用nvm下載即可。

nvm的使用

裡面介紹了什麼是nvm？
為什麼要用nvm？
如何安裝nvm？
nvm常用指令有哪些？
也已經在裡面介紹的很詳細了，最後補充的就是使用版本的時候，要以管理員身份執行。如使用指令：nvm use 12.2.0。

言歸正傳

安裝完成後，鍵盤按下【win+r】輸入cmd後回車（以下簡說開啟cmd），輸入node -v後回車。

顯示如下資訊證明安裝成功，否則請自行檢查（以下簡說自檢）。

修改npm映象

npm映象預設是國外的連結，可以設定為淘寶映象源以加速下載過程。因為部分下載可能因為網路原因而導致下載不成功。

開啟cmd，可選擇輸入以下命令：

設定淘寶映象源：
npx nrm use taobao

檢視當前npm地址：
npm config get registry

還原為初始的npm地址：
npx nrm use npm

下載Yarn

在cmd視窗執行以下命令

npm install -g yarn

安裝jdk8

安裝jdk8的時候一直預設下一步就好了，也不要修改路徑，筆者這裡不做詳細安裝教程。

安裝好後就配置環境變數，以win10為例：
右鍵此電腦->高階系統設定(可能因為電腦解析度問題導致出現位置不一樣)->(下方的)系統環境變數
新建JAVA_HOME，路徑一般預設為：C:\Java\jdk1.8.0_73，如果不是就按你實際安裝的路徑為準，
新建CLASSPATH，輸入：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
編輯PATH，增加：%JAVA_HOME%\bin;和%JAVA_HOME%\jre\bin;
然後一直點選缺點以關閉你剛剛開啟的視窗。除了下圖一

高階系統設定：

jdk路徑

自檢jdk是否安裝好

開啟cmd，輸入java -verison，出現以下即為安裝好且配置成功。

安裝Android Studio

這裡安裝沒有太大問題，筆者可以參考給你們我下載的SDK。

按圖示操作




按圖示操作

就這些了，沒截圖就是沒下載的

建立第一個虛擬機器

預設列表是沒有的，需要點選Create device

選擇phone，尺寸自行選擇，然後next

選擇系統，然後next

點選Finish，後等待下載完成，應該再點選Finish即可，此時列表應該就可以看到你剛剛建立的裝置。

如上圖，預設是沒有8.8GB的，但是你執行後加載系統就變大了，就先這樣可以繼續下一步了。

配置SDK環境變數

參考上面步驟到系統變數。
新建ANDROID_HOME，路徑為你的sdk路徑，如果忘記了你的sdk可以看下圖的提示。

編輯Path，新增下面的變數。

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

• 1
• 2
• 3
• 4

依舊點選確定關閉所有視窗。

自檢SDK環境配置

開啟cmd，輸入set android，前面是你剛新建的變數名，後面是你的sdk路徑。

自測RN環境

安裝腳手架
開啟vscode的終端或者cmd，輸入npm i -g react-native-cli 回車，
等待下載完成可自測是否安裝成功，依舊再vscode的終端或者cmd輸入react-native -v回車，此時可以檢視你安裝腳手架的版本和當前專案的react-native版本。如下圖：

出現圖上資訊，表明安裝腳手架成功。

初始化你的第一個RN專案

安裝指定腳手架版本一般都會顯示找不到資源，如下圖

所以你用以上命令安裝的腳手架版本也是最新的，從官網你也可以看到，不同的RN專案node版本和jdk版本也是不同的，所以初始化你的第一個RN專案需要指定版本建立。可參考官網。

vscode終端輸入npx react-native init myProject --version 0.55.4，如果沒有初始化指定版本的專案你的專案就無法建立成功，資料夾就一個package.json檔案，因為你安裝node版本並不是高版本，所以一點要注意初始化指定版本的RN專案。

按照命令npx react-native init myProject --version 0.55.4等待專案初始化完成。

命令介紹：npx react-native init 專案名 --version 0.xx.xx
一定要初始化到兩個點，一個點就莫名奇妙就報錯

注意：你的初始化專案的路徑一定不要有中文！！！，否則執行起來會報錯。

連線手機或虛擬機器

筆者先介紹真機調式安裝，最後再介紹虛擬機器。
在執行專案之前，得確保你電腦是否連線上了手機。

在教程之前需要注意的是：
無論你選擇用真機還是有虛擬機器都需要注意的是，你要看你電腦配置，如果電腦配置不高建議使用真機而不用虛擬機器。對於你電腦的執行記憶體小於8G的我建議使用真機。

真機：
如果是真機請確保你手機已經進行了如下設定（以Android手機為例）：
1、準備一條USB資料線連線你的電腦
2、在開發者選項中開啟USB除錯，沒有找到開發者選項請自行百度。
3、勾選檔案管理（部分手機就在下拉通知欄裡即可直接勾選）

大致就這三個步驟，具體實現的方法因手機品牌而異，需要你自行解決。

虛擬機器：
開啟Android Studio，如下圖進行操作：

執行你剛剛建立的虛擬機器

首次虛擬機器初始化時間較長，需要耐心等待，直到虛擬機器手機顯示桌面即可繼續進行下一步，如下圖。

可能遇到的錯誤：
說你的VT沒有開啟，具體錯誤描述忘了，大致意思就是你沒有開啟虛擬技術支援。可以先自己檢查一下自己電腦上有沒有開啟。

具體方法是：
1、右鍵工作列選擇工作管理員

選擇效能，看虛擬化是否啟用，如下圖。
已啟用就是已開啟，未啟動可能就是導致你的虛擬機器無法啟動且彈框報錯的原因了，可參考此文章解決。
不同電腦品牌可能開啟方式不同，具體需要你自己百度解決。
可百度搜索關鍵詞電腦如何開啟VT？或電腦如何開啟Virtualization Technology？。

注：此步驟一般需要進入BIOS設定的。

測試是否連線裝置成功（手機/虛擬機器）

開啟cmd，輸入adb devices，連線成功資訊可參考下圖。

未連線到裝置：

成功連線到裝置：

如果出現端口占用情況可分別輸入以下命令：
adb kill-server
adb devices

出現以下資訊，代表重啟完成且連線到裝置：

可能遇到的問題：

會報adb命令識別不了，我這裡提供一種解決方法：

在你的sdk路徑（忘了路徑可以往上看）下的platform-tools資料夾，複製圖中的三樣檔案到C:\使用者\你的使用者名稱，如筆者的：C:\Users\admin。如下圖：


再次輸入以上命令看看能不能識別。如果還是不行，可參考此文章。
還是不行，請自行百度解決，也可能因為你上面sdk環境配置有問題

執行專案

進入你建立的專案資料夾，筆者就是myProject，如cd 你的專案名，
在終端輸入react-native run-android，第一次構建時間較長，請耐心等待，可能會彈出node使用網路需求，你點選允許即可。隨後會彈出node的黑視窗，一定不要關閉！！！
繼續等待程式碼跑完，然後自動就會在你的虛擬機器或者真機上安裝。

注：真機如果沒開啟檔案管理不會彈出安裝介面。
此時你關注node的黑視窗有進度在跑，你安裝時候可能會有進度條在跑，你安裝完成後也會有進度條在跑，等待黑視窗上的進度條跑完即可。如下圖：

成功跑完程式碼，安裝好後會是這個樣子：

此時代表你電腦的RN環境終於配置好了。

可能遇到的錯誤：
如果安裝完成後，開啟安裝的軟體是紅屏的，可以先結束該軟體程序再開啟試試，或者關閉node黑視窗，再重新執行一次react-native run-android。

可能遇到的錯誤總結

出現此上圖錯誤因為中文路徑。

出現上圖錯誤可能因為react-native init xxx --version xx.xx初始化的專案是有問題的。
可以試試用這條命令初始化專案：npx react-native init --version xx.xx.xx 初始化專案
（版本要具體到兩個小數點！！！）

尾聲

如果你覺得本篇文章對你有幫助，記得點贊收藏哦~
有問題歡迎留言指出。