截止到2024-1-11，使用的主要軟件的版本如下：
| 軟件實體 | 版本 |
|---|---|
| react-native | 0.73.1 |
| react | 18.2.0 |
| react-native-cli | 2.0.1 |
| Android Studio | 2022.3.1 Patch3 |
| Android SDK | Android SDK Platform 33 34 |
| Android SDK | Android SDK Tools 33 34 |
| Android SDK | Intel x86 Atom_64 System Image |
| Android SDK | Google APIs Intel x86 Atom System Image |
| node | 20.10.0 |
| yarn | 1.22.21 |
| npm | 10.2.3 |
| openjdk | 17.0.9 |
1. 搭建流程(基于windows10)
最新版本請參考官網(wǎng)
Node.js環(huán)境安裝
安裝node穩(wěn)定版，訪問如下網(wǎng)址，下載安裝20.10.0LTS版本
Node.js官網(wǎng)
yarn的安裝
使用管理員打開cmd，并使用如下命令安裝yarnnpm install -g yarn
react-native腳手架安裝
npm install -g react-native-cli
安裝JDK
安裝jdk，本次使用的版本為17.0.9
命令行中，使用java -version驗證是否成功
添加系統(tǒng)和用戶環(huán)境變量JAVA_HOME，其值為C:\Program Files (x86)\Java\jdk-17.0.9+9
將%JAVA_HOME%\bin添加到系統(tǒng)環(huán)境變量path中，并調整的最前
安裝Android Studio
Android Studio官網(wǎng)下載地址
安裝Android Studio，其步驟沒有特殊的，不需要設置代理，按照提示一直走完安裝流程。
安裝Android SDK
按照下圖，安裝Android SDK Platform 33 34，Android SDK Tools 33 34，Intel x86 Atom_64 System Image，Google APIs Intel x86 Atom System Image
配置Android Studio環(huán)境變量
按照如下圖的操作，將Android SDK Location的值作為系統(tǒng)環(huán)境變量ANDROID_HOME的值
除此以外，將如下的值作為path的環(huán)境變量追加值%ANDROID_HOME%\platform-tools%ANDROID_HOME%\emulator%ANDROID_HOME%\tools%ANDROID_HOME%\tools\bin
2. 使用npx創(chuàng)建demo工程并運行工程
創(chuàng)建工程
首先使用npx創(chuàng)建名稱為helloRN工程npx react-native@latest init helloRN
工程配置文件修改
gradle-wrapper.properties文件修改
打開helloRN\android\wrapper\gradle-wrapper.properties文件，修改distributionUrl的url前綴值為https\://mirrors.cloud.tencent.com/gradle/
build.gradle文件修改
將其內容修改為：
點擊查看代碼
buildscript {
ext {
buildToolsVersion = "34.0.0"
minSdkVersion = 21
compileSdkVersion = 34
targetSdkVersion = 34
ndkVersion = "25.1.8937393"
kotlinVersion = "1.8.0"
}
repositories {
maven { url 'https://maven.aliyun.com/repository/google'}//重點關注這一行
maven { url 'https://dl.google.com/dl/android/maven2/' }
mavenCentral()
}
dependencies {
classpath("com.android.tools.build:gradle:8.1.1") // 指定版本號
classpath("com.facebook.react:react-native-gradle-plugin")
}
}
allprojects {
repositories {
maven{ url 'https://maven.aliyun.com/repository/google'} //重點關注這一行
google()
jcenter()
}
}
apply plugin: "com.facebook.react.rootproject"
注意:兩個配置文件的gradle版本號需要保持一致
運行helloRN工程
首先需要開啟兩個終端，使用終端1在工程目錄下執(zhí)行如下命令：yarn start
使用終端2在工程目錄下執(zhí)行如下命令yarn android
此時工程自動下載依賴文件...
如果出現(xiàn)下載react-android-0.73.1-debug.aar或hermes-android-0.73.1-debug.aar文件超時的情況，請使用迅雷等工具，將完整下載鏈接復制到工具內下載，下載完成后，按如下表放置：文章來源：http://www.zghlxwxcb.cn/news/detail-781764.html
| 文件 | 路徑 |
|---|---|
| react-android-0.73.1-debug.aar | C:\Users\Think.gradle\caches\modules-2\files-2.1\com.facebook.react\react-android\0.73.1\路徑下包含.pom文件的文件夾 |
| hermes-android-0.73.1-debug.aar | C:\Users\Think.gradle\caches\modules-2\files-2.1\com.facebook.react\hermes-android\0.73.1路徑下包含.pom文件的文件夾 |
若未出現(xiàn)報錯，則會出現(xiàn)BUILD SUCCESSFUL的提示，并在手機模擬器出現(xiàn)如下界面
文章來源地址http://www.zghlxwxcb.cn/news/detail-781764.html
到了這里，關于react native在windows環(huán)境搭建并使用腳手架新建工程的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
