首先打開react native官網(wǎng)查看搭建環(huán)境教程
搭建開發(fā)環(huán)境 · React Native 中文網(wǎng)https://reactnative.cn/docs/environment-setup開發(fā)平臺(tái)選擇 windows? 目標(biāo)平臺(tái)選擇 Android
準(zhǔn)備工作：必須安裝的依賴有：Node、JDK 和 Android Studio。
1、安裝node
?node必須在14以上，可以去?node官網(wǎng)下載，我這里用的是NVM。NVM教程?
可以打開cmd，查看當(dāng)前node版本信息
2、全局安裝yarn?
Yarn是 Facebook 提供的替代?npm?的工具，可以加速 node 模塊的下載。
第一步驟已經(jīng)安裝了node，現(xiàn)在可以打開cmd執(zhí)行以下命令；
npm install -g yarn3、安裝?Java Development Kit [JDK] 17?
Java Downloads | Oraclehttps://www.oracle.com/java/technologies/downloads/#jdk17-windows
React Native 需要 Java Development Kit [JDK] 17。你可以在命令行中輸入?javac -version（請(qǐng)注意是 javac，不是 java）來查看你當(dāng)前安裝的 JDK 版本。如果版本不合要求，則可以去Temurin或Oracle JDK上下載(后者下載需注冊(cè)登錄)。
?配置java環(huán)境，打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級(jí)系統(tǒng)設(shè)置 -> 高級(jí) -> 環(huán)境變量 -> 新建
新建一個(gè)JAVA——HOME的系統(tǒng)變量，然后根據(jù)自己的安裝目錄來配置變量值。
4. 安裝 Android Studio
下載 Android Studio 和應(yīng)用工具 - Android 開發(fā)者 ?|? Android Developers (google.cn)https://developer.android.google.cn/studio?hl=zh-cn
?
?然后下載Android studio，進(jìn)入到安裝界面，然后直接無腦下一步next就可以直接安裝程序了。
5、下載項(xiàng)目所需要的SDK?
打開項(xiàng)目后，左上角，點(diǎn)擊File，之后點(diǎn)擊Settings打開SDK Manager
選中一下所有依賴的sdk
?全部選擇完畢后，點(diǎn)擊下邊的Apply按鈕進(jìn)行安裝
然后我們切換到SDK Tools,下載相關(guān)的依賴，同上述方法一樣，選擇完后，點(diǎn)擊Apply，來下載。
6、配置SDK
找到我們要下載的配置sdk的路徑
?
配置 ANDROID_HOME 環(huán)境變量：（這個(gè)官網(wǎng)是有步驟的，小編也給各位摘錄過來方便操作）
React Native 需要通過環(huán)境變量來了解你的 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)）：
還需要把一些工具目錄添加到環(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
?文章來源地址http://www.zghlxwxcb.cn/news/detail-790183.html
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin配置完成后，我們可以打開cmd試一試adb --version命令能不能用?
7、配置虛擬機(jī) virtual device
選擇手機(jī)小圖標(biāo)，然后點(diǎn)擊create virtual device
?選擇一個(gè)我們喜歡的機(jī)型，然后next。
?選擇我們之前下載好的33版本，然后點(diǎn)擊next
?然后點(diǎn)擊Finish，完成虛擬機(jī)的創(chuàng)建。
?我們可以在虛擬機(jī)列表查看我們所創(chuàng)建的虛擬機(jī)。
?
8、react native首次運(yùn)行出現(xiàn)的問題以及所遇到的坑。
1、版本問題
在react native官網(wǎng)為我們提供了兩個(gè)下載命令，分別是下載最新版和指定版本
?在這里呢，我們不要去下載最新版本，應(yīng)該下載0.72版本的項(xiàng)目，因?yàn)樽钚掳姹镜膯?dòng)命令是用不了的，比如它提供的yarn android。
我們應(yīng)該用下邊這段命令去創(chuàng)建項(xiàng)目
npx react-native@X.XX.X init AwesomeProject --version X.XX.Xnpx react-native@0.72 init demo --version 0.72?2、android gradle-8.0-bin-zip下載失敗、下載很慢的解決方法
?然后在我們創(chuàng)建完成項(xiàng)目之后，我們需要修改gradle文件夾下邊的gradle-wrapper.properties文件。
將這段改為distributionUrl=file:///C:/android_gradle/gradle-8.0.1-all.zip。
如果按照默認(rèn)的路徑去下載這個(gè)壓縮包，就會(huì)導(dǎo)致超時(shí)。因?yàn)樗@個(gè)鏈接在我們下載的時(shí)候會(huì)特別慢，從而導(dǎo)致下載失敗，我們可以直接下載好，然后放入我們電腦中，用絕對(duì)路徑去訪問，這樣就會(huì)解決這個(gè)問題。
大家可以去我的百度網(wǎng)盤提取這個(gè)壓縮包
https://pan.baidu.com/s/1HJkZSHD0fJR2kYzr4tDgyw?pwd=qqsy
提取碼: qqsy?
然后在c盤中創(chuàng)建一個(gè)android_gradle文件，將壓縮包放入這個(gè)文件夾里邊就可以了。
3、React-Native: Android 編譯過程中 gradle 依賴包下載各種下載不下來、下載超時(shí)、極慢下載的處理方案。
我們?cè)陧?xiàng)目目錄中找到android文件夾，打開build.gradle文件。將里邊換成阿里的鏡像源，代碼如下：
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "33.0.0"
minSdkVersion = 21
compileSdkVersion = 33
targetSdkVersion = 33
// We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
ndkVersion = "23.1.7779620"
}
repositories {
// google()
// mavenCentral()
maven{ url 'https://maven.aliyun.com/repository/google'}
google()
mavenCentral()
}
dependencies {
classpath("com.android.tools.build:gradle")
classpath("com.facebook.react:react-native-gradle-plugin")
}
}
def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())
直接將原來的代碼更改為以上代碼即可。我們?cè)谙螺d依賴包的時(shí)候一定要注意我們的網(wǎng)絡(luò)，可以更換為自己的手機(jī)熱點(diǎn)，盡量用5G網(wǎng)絡(luò)。下載速度可以大大提高。
9、啟動(dòng)項(xiàng)目
通過以下命令來運(yùn)行我們的項(xiàng)目：
yarn android在最后的最后我們就完成了react native項(xiàng)目環(huán)境的搭建，我們會(huì)進(jìn)入前端開發(fā)的全新領(lǐng)域。
?
以上就是react native環(huán)境搭建的全部過程，如果小伙伴在安裝中遇見問題，可以在評(píng)論區(qū)留言，我看到后會(huì)在第一時(shí)間幫助大家解決問題。如果這篇文章能夠幫助到大家，也希望大家可以給小編點(diǎn)一個(gè)免費(fèi)的小贊。?文章來源：http://www.zghlxwxcb.cn/news/detail-790183.html
?
到了這里，關(guān)于React Native環(huán)境配置搭建（看這一篇就夠了?。┑奈恼戮徒榻B完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
