截止到2024-1-11，使用的主要軟件的版本如下：

1. 搭建流程(基于windows10)

最新版本請參考官網

Node.js環境安裝

安裝node穩定版，訪問如下網址，下載安裝20.10.0LTS版本
Node.js官網

yarn的安裝

使用管理員打開cmd，并使用如下命令安裝yarn
npm install -g yarn

react-native腳手架安裝

npm install -g react-native-cli

安裝JDK

安裝jdk，本次使用的版本為17.0.9
命令行中，使用java -version驗證是否成功
添加系統和用戶環境變量JAVA_HOME，其值為C:\Program Files (x86)\Java\jdk-17.0.9+9
將%JAVA_HOME%\bin添加到系統環境變量path中，并調整的最前

安裝Android Studio

Android Studio官網下載地址
安裝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環境變量

按照如下圖的操作，將Android SDK Location的值作為系統環境變量ANDROID_HOME的值

除此以外，將如下的值作為path的環境變量追加值
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

2. 使用npx創建demo工程并運行工程

創建工程

首先使用npx創建名稱為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在工程目錄下執行如下命令：
yarn start
使用終端2在工程目錄下執行如下命令
yarn android
此時工程自動下載依賴文件...
如果出現下載react-android-0.73.1-debug.aar或hermes-android-0.73.1-debug.aar文件超時的情況，請使用迅雷等工具，將完整下載鏈接復制到工具內下載，下載完成后，按如下表放置：

若未出現報錯，則會出現BUILD SUCCESSFUL的提示，并在手機模擬器出現如下界面

總結

以上是生活随笔為你收集整理的react native在windows环境搭建并使用脚手架新建工程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。