当前位置： 首页 > news >正文

React Native：分享Windows平台搭建react native并构建apk的操作流程和配置信息

news 2025/9/23 11:39:23

目录

前序说明：

1.首先编辑器需要下载Android Studio

2.如果没有VPN请为安卓studio配置网络代理

3.接下来下载安卓的sdk，ndk,还有一台虚拟设备还有配套的gradle依赖

4.安装jdk，版本为17.x，并配置环境变量

5.安装mingw64

6.下载vscode，版本为：1.103.3

7.下载node.js 我的版本为：v22.19.0

9.尝试启动安卓

10.因为晚上网络不好，我关闭了所有应用，白天重新编译启动安卓设备

12.打包安卓apk

13.在Windows上安装第三方安卓多开模拟器

前序说明：

本次分享一下react native构建安卓apk的记录分享。本人鼓捣过Android studio 所以对其不陌生，Java更是看家本领，前端代码概念和基础基本上也通了.只是react native始终没有实践过。这几天研究了一下觉得RN的方案是非常不错的，而且组件库异常丰富。我有考虑过这次搞KMM或者腾讯的kuikly，但想着还是把RN搞通了，东西做起来，未来在看情况是都转向KMM等高性能平台。

1.首先编辑器需要下载Android Studio

下载链接：

https://r7---sn-ni57rn7z.gvt1-cn.com/edgedl/android/studio/install/2025.1.3.7/android-studio-2025.1.3.7-windows.exe?cms_redirect=yes&met=1757952992,&mh=rM&mip=2409:8a00:7950:a310:5989:2e3a:4690:70eb&mm=28&mn=sn-ni57rn7z&ms=nvh&mt=1757952515&mv=m&mvi=7&pl=32&rmhost=r3---sn-ni57rn7z.gvt1-cn.com&rms=nvh,nvh&shardbypass=sd&smhost=r5---sn-ni57rn76.gvt1-cn.com

2.如果没有VPN请为安卓studio配置网络代理

我配置的代理如下：

https://mirrors.aliyun.com/android.googlesource.com/https://mirrors.aliyun.com/android.googlesource.com/代理的作用主要为gradle，sdk, VDM, ndk的下载和更新服务

3.接下来下载安卓的sdk，ndk,还有一台虚拟设备还有配套的gradle依赖

建议修改gradle的仓库地址：这样以后方便找到以及迁移重用

下载sdk和ndk

安卓sdk选择默认最高LTS 16

SDK选择了36，和35 两个版本；ndk选择了28.2.1367635版本

我这已经是下载好的状态，这里我是讲sdk的路径由默认的C盘迁移到D盘了，防止装系统消失

配置sdk的系统环境变量

因为ndk27的版本总是报错，所有更新了ndk的版本，我这个安卓studio的默认版本是29更高，但是RN的gradle配置中的默认版本是27.xxx。不过最终统一为了28.xxx 版本

如果安卓studio下载比较慢的话，直接将如下链接发到迅雷会比较快：

https://dl.google.com/android/repository/android-ndk-r28c-windows.zip

曾报错如下：

总之vscode和安卓studio的配置上ndk和sdk的版本要一直，且最好是较新的lts版本

------

下载一部安卓虚拟机，在安卓studio里面选择一个类型

我选择的是pixel 9,这个虚拟机是建议一定下载的，因为在启动RN测试的时候是需要这个步骤的，如果是新手和小白，用安卓studio的是最快的。

4.安装jdk，版本为17.x，并配置环境变量

记住一定是17版本

下载链接：

https://api.foojay.io/disco/v3.0/ids/16008c489780dfb402c44316e612a16c/redirect

注意jre环境在jdk11以后 需要通过jre生成命令行生成

bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre

生成以后不要忘记了jre的系统路径设置

测试Java 环境：

5.安装mingw64

下载链接：

https://download.ihsdus.cn/down/2023down/9/07/mingw64.zip?timestamp=68ce501c&auth_key=e512ba138f17e86772764bec3d95d702

同样的需要配置系统环境变量

测试编译器版本：

6.下载vscode，版本为：1.103.3

下载链接：

https://vscode.download.prss.microsoft.com/dbazure/download/stable/6f17636121051a53c88d3e605c491d22af2ba755/VSCodeUserSetup-x64-1.103.2.exe

添加插件：

Auto Close Tag，C/C++，Code Runner，ES7+ React/Redux/React-Native snippets，ESLint，Gradle for Java，Node.js Modules Intellisense，nodejs，Nodejs Snippets，Path Intellisense，Prettier - Code formatter，React Native Snippet，React Native Tools

7.下载node.js 我的版本为：v22.19.0

下载链接：

https://cdn.npmmirror.com/binaries/node/v22.19.0/node-v22.19.0-x64.msi

8.参考RN的开发指南搭建环境

搭建开发环境 · React Native 中文网

执行会检测是否安装了cli工具，会自动提示和协助安装，但要保障网速以及是否转换为了国内的淘宝镜像

npx @react-native-community/cli init AwesomeProject

创建项目的过程：

npx nrm use taobao
npm install -g yarn
npm uninstall -g react-native-cli @react-native-community/cli
npx @react-native-community/cli init AP

创建的目录如下：

9.尝试启动安卓

将AP项目写入vscode

修改ndk版本号与安卓studio的一致

增加maven的国内镜像源

需要注意

google()
mavenCentral()

这两个要放在前面，这样会优先下载特殊的依赖以及补充镜像源无法提供的依赖

如：

buildscript {ext {buildToolsVersion = "36.0.0"minSdkVersion = 24compileSdkVersion = 36targetSdkVersion = 36// ndkVersion = "27.1.12297006"ndkVersion = "28.2.13676358"kotlinVersion = "2.1.20"}repositories {google()mavenCentral()// maven { url 'https://maven.aliyun.com/repository/google' }// maven { url 'https://maven.aliyun.com/repository/jcenter' }// maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }maven { url 'https://maven.aliyun.com/repository/jcenter' }maven { url 'https://maven.aliyun.com/repository/central' }maven { url 'https://maven.aliyun.com/repository/public/' }maven { url 'https://maven.aliyun.com/repository/google' }maven { url 'https://jitpack.io' }}dependencies {classpath("com.android.tools.build:gradle")classpath("com.facebook.react:react-native-gradle-plugin")classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")}
}apply plugin: "com.facebook.react.rootproject"

提前下载好gradle的可执行程序文件，然后将其放置在指定本地目录，并设定绝对路径指向该文件

下载地址：建议迅雷下载会比较快

https://services.gradle.org/distributions/gradle-8.14.3-bin.zip

执行安卓编译程序

yarn andriod

尝试使用以下链接解决；

react-native 首次运行慢_启动react-native项目很慢-CSDN博客

allprojects{repositories {def ALIYUN_REPOSITORY_URL = 'https://maven.aliyun.com/repository/central/'def ALIYUN_JCENTER_URL = 'https://maven.aliyun.com/repository/public/'all { ArtifactRepository repo ->if(repo instanceof MavenArtifactRepository){def url = repo.url.toString()if (url.startsWith('https://repo1.maven.org/maven2') || url.startsWith('http://repo1.maven.org/maven2')) {project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_REPOSITORY_URL."remove repo}if (url.startsWith('https://jcenter.bintray.com/') || url.startsWith('http://jcenter.bintray.com/')) {project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_JCENTER_URL."remove repo}}}maven {url ALIYUN_REPOSITORY_URLurl ALIYUN_JCENTER_URLurl 'https://maven.aliyun.com/repository/google/'url 'https://maven.aliyun.com/repository/gradle-plugin/'}}buildscript{repositories {def ALIYUN_REPOSITORY_URL = 'https://maven.aliyun.com/repository/central/'def ALIYUN_JCENTER_URL = 'https://maven.aliyun.com/repository/public/'all { ArtifactRepository repo ->if(repo instanceof MavenArtifactRepository){def url = repo.url.toString()if (url.startsWith('https://repo1.maven.org/maven2') || url.startsWith('http://repo1.maven.org/maven2')) {project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_REPOSITORY_URL."remove repo}if (url.startsWith('https://jcenter.bintray.com/') || url.startsWith('http://jcenter.bintray.com/')) {project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_JCENTER_URL."remove repo}}}maven {url ALIYUN_REPOSITORY_URLurl ALIYUN_JCENTER_URLurl 'https://maven.aliyun.com/repository/google/'url 'https://maven.aliyun.com/repository/gradle-plugin/'}}}
}

这样速度果然看了很多

因为我开着雷电模拟器所以它默认启用了第三方模拟器，所以我退掉了模拟器，然后重新执行

yarn android

命令

效果如下：

我们创建的安卓studio虚拟安卓设备成功调出。

10.因为晚上网络不好，我关闭了所有应用，白天重新编译启动安卓设备

11.点击pixel 9手机上的我的应用，能看到应用画面和控制台的信息输出

点击一个标签，自动跳转到一个网页应用

11.关闭vscode终端 RN的进程不会影响pixel 虚拟机终端的使用。我们需要手动关闭终端控制台，关闭安卓SDKcrash 终端信息捕获终端

12.打包安卓apk

在项目目录下生成密钥（公钥和私钥）

keytool -genkeypair -v -storetype PKCS12 -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

将生成的 .keystore 文件放入 android/app 文件夹。

配置 Gradle 签名
编辑 android/gradle.properties，添加以下内容：
 

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=你的密码
MYAPP_RELEASE_KEY_PASSWORD=你的密码

在 android/app/build.gradle 中添加签名配置：

signingConfigs {release {storeFile file(MYAPP_RELEASE_STORE_FILE)storePassword MYAPP_RELEASE_STORE_PASSWORDkeyAlias MYAPP_RELEASE_KEY_ALIASkeyPassword MYAPP_RELEASE_KEY_PASSWORD}
}
buildTypes {release {signingConfig signingConfigs.release}
}

成功生成 了两个apk

13.在Windows上安装第三方安卓多开模拟器

我最近用的是雷电模拟器，将apk装在模拟器里面看效果

打开雷电模拟器平板电脑，选择apk安装安卓应用

找到项目中的apk文件进行安装

接下来就像在手机里面用鼠标模拟电机操作了，双击打开你的安卓应用，开启你终端世界的神奇大门。

http://www.dtcms.com/a/395744.html

相关文章：

  • EC24026露营灯警示灯芯片方案 报警声语音IC 单片机方案开发
  • 反量化的详细过程
  • C语言：实现3x3矩阵对角线求和
  • [Maven 基础课程]Maven 工程继承和聚合
  • 数据库--存储过程
  • mysql默认事务隔离级别下并发读不到最新数据解决方案
  • M3U8通用下载器
  • Vue动态组件详细用法指南
  • C#练习题——委托练习
  • 【TS4】简单的typescript练手项目
  • 前端学习手册-JavaScript函数与回调(十一)
  • Unity小游戏接入抖音敏感词检测
  • 【2025最新】01 Spring Boot 第一个小程序 for VS Code - 通过 Spring Initializr 网站创建
  • 算法面试（3）------YOLO 的核心思想是什么？YOLOv1 到 v8 的演进路线？
  • docker 部署gitlib
  • SpringBoot3.5.5版本大坑
  • Lightroom Classic 2025专业级数字照片管理与后期处理全解析
  • 交叉编译工具链
  • 前端构建工具有哪些？常用前端构建工具推荐、前端构建工具对比与最佳实践
  • 【RocketMQ入门到精通 | 4】工作原理：indexFile索引文件
  • PPIO首发上线DeepSeek-V3.1-Terminus
  • 《嵌入式驱动（一）：系统移植》
  • C语言（长期更新）第22讲：文件操作（一）
  • 财务管控——解读79页集团财务业务管控方法及信息化应用案例【附全文阅读】
  • 火语言RPA：解锁开发者工作流的“自动化密码”
  • 用户行为数据可视化
  • jdbc-数据更新与删除
  • 【GitLab】GitLab-CI（shell方式）入门配置
  • Python入门 | 三个if语句程序作业和基础语法笔记
  • BeanPropertyRowMapper