react native在windows环境搭建并使用脚手架新建工程

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

软件实体	版本
react-native	0.77.0
react	18.3.1
react-native-community/cli	15.0.1
Android Studio	2022.3.1 Patch3
Android SDK	Android SDK Platform 34 35
Android SDK	Android SDK Tools 34 35
Android SDK	Intel x86 Atom_64 System Image
Android SDK	Google APIs Intel x86 Atom System Image
node	18.18.2
yarn	1.22.22
npm	9.8.1
jdk	17.0.8

1. 搭建流程(基于windows10)

最新版本请参考官网

Node.js环境安装

安装node稳定版，访问如下网址
Node.js官网

yarn的安装

使用管理员打开cmd，并使用如下命令安装yarn

复制代码

npm install -g yarn

react-native脚手架安装

复制代码

npm install -g react-native-cli

安装JDK

安装jdk，本次使用的版本为17.0.8

添加系统和用户环境变量**JAVA_HOME**，其值为

复制代码

D:\Develop\jdk-17

将**%JAVA_HOME%\bin**添加到系统环境变量path中

使用java -version验证是否成功

安装Android Studio

Android Studio官网下载地址安装包也可以通过360软件管家下载

安装Android Studio，其步骤没有特殊的，不需要设置代理，按照提示一直走完安装流程。

选择安装的组件

选择安装位置

打开Android Studio

如果本地有设置文件，选择Config or installation folder

如果本地没有设置文件，选择Do not import settings

点击OK，跳转到Data Sharing界面，根据自己用途选择，我这里选择Don't send，如图：

点击Don't send，弹出找不到SDK的界面，如图：

点击cancel--然后点击next

注意选中custom

选择主题

点击Next，跳转的安装SDK界面，默认选择，选择安装的路径，如图：

点击Next，跳转内存分配界面，默认就好，内存主要看你自己电脑内存，每个人的电脑内存是不一样的，如图：

点击Next，确认安装配置界面，如图：

接受协议然后点击finish

打开时下载组件，这个过程会很漫长耐心等待

点击finish

创建一个新项目

安装成功

配置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-community/cli init helloRN

工程配置文件修改

gradle-wrapper.properties文件修改

报错：

react native Exception in thread "main" java.io.IOException: Downloading from https://services.gradle.org/distributions/gradle-8.10.2-all.zip failed: timeout (10000ms)

原因：https://services.gradle.org/distributions/gradle-8.10.2-all.zip 文件获取不到

解决办法

打开helloRN\android\wrapper\gradle-wrapper.properties文件

修改distributionUrl的url前缀值为https\://mirrors.cloud.tencent.com/gradle/

build.gradle文件修改

将其内容修改为：

复制代码

buildscript {
    ext {
        buildToolsVersion = "35.0.0"
        minSdkVersion = 24
        compileSdkVersion = 35
        targetSdkVersion = 34
        ndkVersion = "27.1.12297006"
        kotlinVersion = "2.0.21"
    }
    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") // 不指定版本号
        classpath("com.facebook.react:react-native-gradle-plugin:0.77.0") // 版本号和react-native一样
    }
}
allprojects {
    repositories {
        maven{ url 'https://maven.aliyun.com/repository/google'} //重点关注这一行
        google()
        jcenter()
    }
}
 
apply plugin: "com.facebook.react.rootproject"

运行helloRN工程

首先需要开启两个终端，使用终端1在工程目录下执行如下命令：

复制代码

yarn start

使用终端2在工程目录下执行如下命令

复制代码

yarn android

此时工程自动下载依赖文件...

如果出现下载react-android-0.73.1-debug.aar或hermes-android-0.73.1-debug.aar文件超时的情况，请使用迅雷等工具，将完整下载链接复制到工具内下载，下载完成后，按如下表放置：

文件	路径
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文件的文件夹

若未出现报错，则会出现BUILD SUCCESSFUL的提示，并在手机模拟器出现如下界面

虚拟机的使用

始终置顶

CTRL + M 打开调试框