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

news2025/5/11 3:45:44

截止到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的提示，并在手机模拟器出现如下界面