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.aarhermes-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 打开调试框

相关推荐
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong15 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
用户76787977373216 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
小仙女喂得猪19 小时前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
艾小码20 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
骑自行车的码农20 小时前
【React用到的一些算法】游标和栈
算法·react.js
小高00720 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
XTransfer技术21 小时前
RN也有微前端框架了? Xtransfer的RN优化实践(一)多bundle架构
前端·react native
江城开朗的豌豆1 天前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
江城开朗的豌豆1 天前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js