小編在配置RN環(huán)境的時(shí)候，遇到了各種坎兒，在發(fā)布這篇之前終于是搞好了，特此在這把詳細(xì)過(guò)程記錄下，以便造福各位。（一鍵三連點(diǎn)關(guān)注，關(guān)注小夏不迷路）

一.首先先來(lái)打開官網(wǎng)：（React Native）

準(zhǔn)備工作：必須安裝的依賴有：Node、JDK 和 Android Studio。

二.安裝node：

1）node必須在14以上，可以去?node官網(wǎng)下載。

2）個(gè)人我推薦使用NVM，因?yàn)镹VM可以很方便的切換版本，避免后續(xù)接手舊項(xiàng)目還得很麻煩的處理node降級(jí)的問(wèn)題。

2）如果已經(jīng)安裝好，可以跳過(guò)此環(huán)節(jié)

三.安裝yarn：

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。
第一步驟已經(jīng)安裝了node，現(xiàn)在可以打開cmd執(zhí)行以下命令；

npm install -g yarn

注意：如果vscode編譯器的終端輸入yarn的命令報(bào)錯(cuò)“無(wú)法將 yarn 項(xiàng)識(shí)別為…”，原因是vscode中的集成終端使用的是powershell，所以我們要設(shè)置一下powershell的執(zhí)行權(quán)限。

?設(shè)置powershell的執(zhí)行權(quán)限：
1、在開始搜索框中搜索powershell，右鍵，以管理員身份運(yùn)行2、執(zhí)行set-ExecutionPolicy RemoteSigned命令，并輸入y選項(xiàng)

四.?安裝Java SE Development Kit（JDK）11

React Native 需要 Java Development Kit [JDK] 11。你可以在命令行中輸入 javac -version（請(qǐng)注意是 javac，不是 java）來(lái)查看你當(dāng)前安裝的 JDK 版本。如果版本不合要求，則可以去Temurin或Oracle JDK上下載(后者下載需注冊(cè)登錄)。

1、下載Java Development Kit
我要介紹的是Oracle JDK的方式，
打開官網(wǎng)，如下圖所示，點(diǎn)擊下載jdk-11.0.19_windows-x64_bin.exe文件，因?yàn)榘惭bexe文件后，會(huì)自動(dòng)給你配置環(huán)境變量，無(wú)需手動(dòng)配置。

注意：打開官網(wǎng)后，展示的是最新版本（JDK21），不建議安裝最新版本 ，17版本一下的都可以，小編安裝的是JDK11，可以根據(jù)需要自行下載。

2、同意協(xié)議后繼續(xù)下載
點(diǎn)擊第一步后會(huì)打開如下彈窗：

3、登錄Oracle
點(diǎn)擊上一步后，如果沒(méi)有登錄，需要登錄一下。如果沒(méi)有注冊(cè)過(guò)，需要先注冊(cè)后登錄

下載之后，得到j(luò)dk-11.0.19_windows-x64_bin.exe文件

4、安裝jdk-11.0.19_windows-x64_bin.exe
安裝這個(gè)就很簡(jiǎn)單，直接一路下一步就好了，安裝路徑建議用默認(rèn)路徑。

5、查看是否安裝成功
打開cmd，輸入 javac -version ,如果能看到版本號(hào)就說(shuō)明安裝成功了

到了這里?JDK 也就安裝完成了。

五.搭建Android 開發(fā)環(huán)境

搭建android開發(fā)環(huán)境是真的費(fèi)勁兒，官網(wǎng)也沒(méi)有詳細(xì)的過(guò)程說(shuō)明，這里會(huì)把詳細(xì)的過(guò)程以及注意事項(xiàng)記錄下來(lái)，可以跟著我的步驟，帶你少走彎路。

1、下載 Android Studio
國(guó)內(nèi)用戶可能無(wú)法打開官方鏈接，那就需要先連接VPN，再進(jìn)入官方鏈接下載。沒(méi)有VPN就自行使用搜索引擎搜索可用的下載鏈接。
點(diǎn)擊進(jìn)入?Android Studio

點(diǎn)擊下載，會(huì)有彈出框：

下載得到 android-studio-2022.3.1.21-windows.exe，雙擊打開安裝

2、 安裝 Android Studio
作為資深安裝工程師，告訴你安裝技巧就是，一路Next，最后Install。

3、配置Android Studio
上個(gè)圖片已經(jīng)勾選打開Android Studio
（1）選擇方式
打開后會(huì)彈出一個(gè)彈窗如下，默認(rèn)選擇第二個(gè)選項(xiàng)就好

（2）是否要配置代理
下一步如果出現(xiàn)如下彈窗，就是想讓你配置一個(gè)代理，在我們沒(méi)有熟悉 Android Studio或者沒(méi)有經(jīng)常用的時(shí)候，這個(gè)配置無(wú)需理會(huì)，點(diǎn)擊 Cancel 關(guān)閉彈窗

（3）進(jìn)入到初始配置頁(yè)面，點(diǎn)擊 Next

（4）選擇自定義安裝，如下：

（5）默認(rèn)路徑就好，繼續(xù) Next

（6）選擇主題背景顏色

（7）勾選要下載的內(nèi)容

注意：不一定要下載這個(gè)模擬器，可以使用第三方模擬器（例如：雷霆模擬器），使用第三方模擬器的用法我就不介紹了，本文只介紹Android 官方提供的Android Virtual Device模擬器，我覺(jué)得挺好用的。

（8）這一步是檢測(cè)到你可以設(shè)置系統(tǒng)加速，已經(jīng)給你推薦2GB，繼續(xù)點(diǎn)擊 Next 走下一步（2022版的是沒(méi)有這步的，正常next就行）

（9）安裝確認(rèn)，點(diǎn)擊 Next

（10）要下載的詳情
顯示要安裝的包，繼續(xù) Next

（11）同意協(xié)議
分別點(diǎn)擊左邊的三個(gè)項(xiàng)目，勾選右邊的 Accept 表示同意協(xié)議，然后點(diǎn)擊 Finish：

（我安裝的時(shí)候只有兩個(gè)文件目錄，點(diǎn)擊文件目錄點(diǎn)擊右下角的Accept，之后點(diǎn)擊Finish即可）

（12）接下來(lái)就是安裝各個(gè)包
點(diǎn)擊 Show Details 查看要下載的具體內(nèi)容

（13）拿到模擬器包的鏈接
重點(diǎn)來(lái)了，把下載模擬器包的鏈接復(fù)制出來(lái)：
https://dl.google.com/android/repository/sys-img/google_apis/x86_64-33_r10.zip
以后可能下載路徑會(huì)變動(dòng)，最好自行復(fù)制，看到帶有x86_64的zip包就沒(méi)錯(cuò)

（14）下載模擬器包：x86_64-33_r10.zip

使用瀏覽器下載之后，手動(dòng)取消，關(guān)閉下載，然后點(diǎn)擊 Finish，關(guān)閉Android Studio。

重新打開Android Studio，就又回到初始步驟，按照之前的步驟繼續(xù)走。
重點(diǎn)：走到下面這一步的時(shí)候，把Android Virtual Device取消勾選，然后繼續(xù) Next，后續(xù)的步驟和上面一樣。（這樣下載就會(huì)快很多，大概幾分鐘就ok了）

注意：下載完成的時(shí)候，可能程序會(huì)自動(dòng)給你配置系統(tǒng)環(huán)境變量，如果你安裝了360之類的安全軟件，會(huì)提示你 檢測(cè)到有程序嘗試修改系統(tǒng)設(shè)置，這時(shí)候一定要允許，不然后續(xù)可能得自己配置環(huán)境變量了，怎么配置就自行百度了。

（15）打開項(xiàng)目
打開react native項(xiàng)目，還沒(méi)項(xiàng)目的就自己先去 new 一個(gè)項(xiàng)目：

（16）打開SDK Manager
打開項(xiàng)目后，左上角，點(diǎn)擊File，之后點(diǎn)擊Settings打開SDK Manager

復(fù)制下圖Sdk路徑

粘貼到文件夾目錄，回車打開Sdk目錄：

（17）新建個(gè)文件夾，把剛下載的壓縮包解壓進(jìn)去，解壓到這個(gè)目錄替換掉這個(gè)文件夾：（這個(gè)包解壓出來(lái)剛好是x86_64文件夾）

（18）配置 SDK

關(guān)閉Android Studio，再次打開SDK Manager

在 SDK Manager 中選擇"SDK Platforms"選項(xiàng)卡，然后在右下角勾選"Show Package Details"。展開Android 13 (Tiramisu)選項(xiàng)，確保勾選了 Android SDK Platform 33 和 Google APIs Intel x86 Atom System Image(這個(gè)就是上一步解壓的模擬器包，前面是橫杠說(shuō)明已經(jīng)配置好，無(wú)需再勾選下載) ，如下：

然后點(diǎn)擊"SDK Tools"選項(xiàng)卡，同樣勾中右下角的"Show Package Details"。展開"Android SDK Build-Tools"選項(xiàng)，確保選中了 React Native 所必須的33.0.0版本。（你可以同時(shí)安裝多個(gè)其他版本。）

然后點(diǎn)擊"Apply"來(lái)下載和安裝這些組件，彈窗確認(rèn)，點(diǎn)擊 ok：

最后點(diǎn)擊Finish，然后關(guān)閉SDK Manager.

(19)創(chuàng)建模擬器

點(diǎn)擊Device Manager，打開窗口，之后點(diǎn)擊Create Device，創(chuàng)建虛擬機(jī)。

之后選擇喜歡的機(jī)型即可：

點(diǎn)擊Finish，就創(chuàng)建成功了：

（20）配置 ANDROID_HOME 環(huán)境變量：（這個(gè)官網(wǎng)是有步驟的，小編也給各位摘錄過(guò)來(lái)方便操作）

React Native 需要通過(guò)環(huán)境變量來(lái)了解你的 Android SDK 裝在什么路徑，從而正常進(jìn)行編譯。

打開控制面板?->?系統(tǒng)和安全?->?系統(tǒng)?->?高級(jí)系統(tǒng)設(shè)置?->?高級(jí)?->?環(huán)境變量?->?新建，創(chuàng)建一個(gè)名為ANDROID_HOME的環(huán)境變量（系統(tǒng)或用戶變量均可），指向你的 Android SDK 所在的目錄（具體的路徑可能和下圖不一致，請(qǐng)自行確認(rèn)）：

注意：win11直接搜索編輯系統(tǒng)環(huán)境變量，之后點(diǎn)擊進(jìn)入，在點(diǎn)擊右下角環(huán)境變量即可

SDK 默認(rèn)是安裝在下面的目錄：

C:\Users\你的用戶名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜單中查看 SDK 的真實(shí)路徑，具體是Appearance & Behavior?→?System Settings?→?Android SDK。

你需要關(guān)閉現(xiàn)有的命令符提示窗口然后重新打開，這樣新的環(huán)境變量才能生效。

（21）把一些工具目錄添加到環(huán)境變量 Path
打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級(jí)系統(tǒng)設(shè)置 -> 高級(jí) -> 環(huán)境變量，選中Path變量，然后點(diǎn)擊編輯。點(diǎn)擊新建然后把這些工具目錄路徑添加進(jìn)去：platform-tools、emulator、tools、tools/bin

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

你需要關(guān)閉現(xiàn)有的命令符提示窗口然后重新打開，這樣新的環(huán)境變量才能生效。

到這里react-native的環(huán)境配置就完成了，可以開始進(jìn)行項(xiàng)目的運(yùn)行及測(cè)試了。（賀電）

五.React Native 首次運(yùn)行時(shí)的問(wèn)題梳理

小編在配置玩環(huán)境后，就第一時(shí)間嘗試創(chuàng)建運(yùn)行了一個(gè)RN的項(xiàng)目，但是剛開始就遇到了問(wèn)題，所以也一起給各位工程師大大梳理下可能會(huì)遇到的問(wèn)題。

1.react-native 項(xiàng)目的創(chuàng)建

如果你之前全局安裝過(guò)舊的react-native-cli命令行工具，請(qǐng)使用npm uninstall -g react-native-cli卸載掉它以避免一些沖突：

npm uninstall -g react-native-cli @react-native-community/cli

創(chuàng)建命令官網(wǎng)提供了兩個(gè)：

第一種：

npx react-native@latest init AwesomeProject

第二種：（[可選參數(shù)] 指定版本或項(xiàng)目模板）建議使用第二種命令

npx react-native@X.XX.X init AwesomeProject --version X.XX.X

注意1.請(qǐng)不要在目錄、文件名中使用中文、空格等特殊符號(hào)。請(qǐng)不要單獨(dú)使用常見的關(guān)鍵字作為項(xiàng)目名（如 class, native, new, package 等等）。請(qǐng)不要使用與核心模塊同名的項(xiàng)目名（如 react, react-native 等）。

注意2：請(qǐng)不要在某些權(quán)限敏感的目錄例如 System32 目錄中 init 項(xiàng)目！會(huì)有各種權(quán)限限制導(dǎo)致不能運(yùn)行！

注意3：請(qǐng)不要使用一些移植的終端環(huán)境，例如git bash或mingw等等，這些在 windows 下可能導(dǎo)致找不到環(huán)境變量。請(qǐng)使用系統(tǒng)自帶的命令行（CMD 或 powershell）運(yùn)行。

ps：版本號(hào)x.xx即可；版本號(hào)選擇不要選擇最新版本，個(gè)人建議0.72,0.73就可以

之后，等待執(zhí)行完畢，項(xiàng)目創(chuàng)建就ok了?。?！

2.運(yùn)行前的配置

運(yùn)行項(xiàng)目之前，進(jìn)入gradle文件夾，打開gradle-wrapper.properties文件。

修改distributionUrl的路徑，改為本地路徑，如圖：

之后就可以在終端執(zhí)行了。

執(zhí)行命令：

npx react-native run-android

或者通過(guò)yarn進(jìn)行運(yùn)行：

yarn android

3.運(yùn)行后報(bào)錯(cuò)：Cannot start server in new window because no terminal app was specified。

解決方案：

可以下載git運(yùn)行，之后通過(guò)git運(yùn)行rn項(xiàng)目。

這樣就運(yùn)行起來(lái)了?。?！

運(yùn)行后會(huì)在項(xiàng)目目錄中生成一個(gè).gradle文件夾。c盤也會(huì)生成一個(gè).gradle目錄

4.gradle版本不匹配

解決方案：

查看你下載的gradle與你的react-native版本是否匹配。還有下載指定對(duì)應(yīng)路徑，放置在本地目錄后，修改你的distributionUrl路徑。（注意名稱一定不要寫錯(cuò)）

5.下載gradle-plugin報(bào)錯(cuò)：

他這個(gè)是訪問(wèn)Google和jcenter倉(cāng)庫(kù)去進(jìn)行下載，所以比較慢，讀取超時(shí)，就會(huì)報(bào)錯(cuò)。

解決方案：

1)網(wǎng)好的情況下：可以通過(guò)切換淘寶鏡像進(jìn)行重新執(zhí)行。

在項(xiàng)目文件中點(diǎn)擊android文件夾，打開build.gradle,如圖：

把google（）注釋了。添加

maven{ url 'https://maven.aliyun.com/repository/google'}

切換好淘寶鏡像倉(cāng)庫(kù)后，重新運(yùn)行即可。（后續(xù)下載解析很多文件，稍加等待即可）

終極方案：（替換大法）

報(bào)錯(cuò)提示上顯示無(wú)法加載的資源，后面會(huì)跟著鏈接，把鏈接復(fù)制到瀏覽器，進(jìn)行下載，下到本地。

下載時(shí)可能會(huì)遇到網(wǎng)絡(luò)問(wèn)題，多試幾次，或者可以去百度找下別人分享的網(wǎng)盤資源。

下載好之后就到關(guān)鍵步驟了，該把他放在那個(gè)文件夾里呢？

小編就不給大家賣關(guān)子了，畢竟能看到這的都是鐵粉了，一定都是點(diǎn)過(guò)關(guān)注的了。我們直接上干活。

1.在下載過(guò)程中有一個(gè)比較大的文件‘kotlin-compiler-embeddable’，大概50多MIB。這個(gè)要下很長(zhǎng)時(shí)間。所以小編想了另外一種方法就是替換下載文件。

方法其實(shí)非常的easy，首先先打開此電腦，點(diǎn)擊進(jìn)入C盤，找到用戶文件夾，進(jìn)去后點(diǎn)擊對(duì)應(yīng)用戶名的文件夾,找到.gradle命名的文件夾，他是gradle運(yùn)行以后生成的緩存文件夾，進(jìn)去后會(huì)有一些配置文件，點(diǎn)擊caches文件夾，這個(gè)是存放電腦臨時(shí)緩存文件，進(jìn)入后找到modules-2文件夾進(jìn)入，之后在點(diǎn)擊files-2.1，進(jìn)去后會(huì)看到很多依賴包的文件夾，往下拉，找到“org.jetbrains.kotlin”命名的文件夾，里面同樣由很多文件，找以‘kotlin-compiler-embeddable’命名的文件夾，進(jìn)入后看到幾個(gè)隨機(jī)生成的文件夾，點(diǎn)擊進(jìn)入 ，找到POM類型的文件，這個(gè)實(shí)際上就是Maven的驅(qū)動(dòng)核心，可以通過(guò)VSCode打開改文件，找到對(duì)應(yīng)的資源下載路徑進(jìn)行下載。下載好后，直接將下載好的壓縮包放到此文件夾即可。

C盤 > USER > 用戶名 > .gradle > .modules-2 > files-2.1 >?org.jetbrains.kotlin >

?kotlin-compiler-embeddable >進(jìn)入含有POM文件類型的文件夾

為方便各位讀者：小編特分享下載資源庫(kù)網(wǎng)址?？梢酝ㄟ^(guò)該網(wǎng)址下載指定依賴資源。???????

?

kotlin-compiler-embeddable對(duì)應(yīng)的依賴鏈接：maven.pkg.jetbrains.space/kotlin/p/kotlin/bootstrap/org/jetbrains/kotlin/kotlin-compiler-embeddable/

根據(jù)你當(dāng)時(shí)顯示的版本選擇下載。

注意:選擇下載時(shí)選擇文件名-版本號(hào).jar的文件下載。

2.解析依賴文件時(shí)，會(huì)下載一個(gè)‘hermes-android’和‘react-android’的aar類型的兩個(gè)二級(jí)制文件

Hermes是Facebook專門為ReactNative框架研發(fā)的輕量的JavaScript引擎，改文件大概110MIB左右。下載時(shí)同樣會(huì)遇到讀取超時(shí)問(wèn)題，如果已經(jīng)配置好鏡像倉(cāng)庫(kù)，可以直接忽律。

而另一個(gè)‘react-android-0.72.8-debug’的依賴資源大概190MIB左右。

這里小編主要還是講解通過(guò)下載替換的方式進(jìn)行操作展示。

同樣先打開此電腦，點(diǎn)擊進(jìn)入C盤，選擇用戶文件夾，進(jìn)入對(duì)應(yīng)的用戶文件，找到 .gradle 文件夾，點(diǎn)擊進(jìn)去后點(diǎn)擊caches文件夾，選擇modules-2文件夾，進(jìn)去后點(diǎn)擊files-2.1文件夾，下拉找到 com.facebook.react 文件夾，里面就可以看到'hermes-android'和'react-android'這兩個(gè)文件夾，先點(diǎn)擊hermes-android文件夾，里面只有一個(gè)以版本號(hào)命名的文件夾，點(diǎn)進(jìn)去會(huì)顯示幾個(gè)隨機(jī)命名的文件夾，找到POM類型文件所在的文件夾，還是將下載好的文件直接拉過(guò)來(lái)即可。

倉(cāng)庫(kù)鏈接：

Central Repository: (apache.org)

hermes-android資源鏈接：

Central Repository: com/facebook/react/hermes-android (apache.org)

react-android資源鏈接：

Central Repository: com/facebook/react/react-android (apache.org)

找到對(duì)應(yīng)的版本進(jìn)行下載即可;

ps：這里給各位整理好了小編創(chuàng)建rn項(xiàng)目（0.72版本）時(shí)安裝的這幾個(gè)文件，已經(jīng)給諸位打包好上傳云盤，需要自取

鏈接：https://pan.baidu.com/s/1kglHAjYvWfv3sNxQ98S5rA?
提取碼：589r

搞好之后，關(guān)閉虛擬機(jī)，重新執(zhí)行命令讓他自動(dòng)加載解析即可。

看到這個(gè)就說(shuō)明環(huán)境構(gòu)建成功了！在虛擬機(jī)上也會(huì)運(yùn)行項(xiàng)目index頁(yè)面?。。?mark hidden color="red">文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-780711.html

功成身退，我們下次見。??文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-780711.html

到了這里，關(guān)于React Native環(huán)境配置搭建（全網(wǎng)最全 沒(méi)有之一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！