新手如何搭建配置Android Studio并成功运行React Native项目(使用自带的虚拟机运行)

一、Node安装

Node 的版本应大于等于 18,node对应版本下载链接https://nodejs.org/en

二、Java JDK安装

1.JDK下载

链接:https://www.oracle.com/java/technologies/downloads/#java17

2.环境变量配置

1.JAVA_HOME变量配置,路径根据安装的路径填入

2.Path路径加入,路径根据安装的路径填入

3.检验是否已经成功安装

win+r调出cmd,enter后输入javac -version,如果查到版本则说明成功安装

三、Android Studio软件下载

首先,任何技术的学习都得先从文档下手,此处我们需要先查看react native文档,按照react native文档里面的要求进行安装,下面列出基本步骤

(1)下载Android Studio安装包,根据电脑系统选择对应的安装包,软件安装链接:

https://developer.android.google.cn/studio?hl=zh-cn

(2)软件安装注意:最好全程开启代理才能确保软件一些初始化的组件和SDK能自动安装上

1. 安装 Android Studio

2. 安装 Android SDK

3. 配置 ANDROID_HOME 环境变量

4. 把工具目录添加到环境变量 Path

上面为安装文档的基本步骤,具体的详细配置请参照官方文档搭建步骤https://www.react-native.cn/docs/environment-setup

上面需要确保正确操作的有:

步骤一:安装界面中选择"Custom"选项,确保选中了以下几项:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

步骤二:安装的SDK和Image版本选择必须按照文档要求,以下截图为重点可以查看勾选对应版本的按钮(安装了好几次才注意到还有版本的选择按钮,勾选上可以查看到能安装的所有版本),选择需要下载的版本后点击Apply按钮即可下载

步骤三和四:环境变量配置

ANDROID_HOME(可配置为用户变量或者系统变量):

环境变量 Path添加%ANDROID_HOME%\platform-tools

5.虚拟机创建

现在Tools->Device Manager,点击右侧弹出的添加按钮,添加设备

四、React Native项目下载

在存放项目文件夹目录下,shift+鼠标右键打开shell命令窗口,输入下面命令下载项目文件

安装:

npx @react-native-community/cli init AwesomeProject

运行项目:

cd AwesomeProject

yarn android

或者

npx react-native run-android

期待已久的界面出来啦!

五、问题汇总

(1)运行npx react-native doctor返回如下

✓ Gradlew - Build tool required for Android builds

✖ Android SDK - Required for building and installing your app on Android

  • Versions found: N/A

  • Version supported: 36.0.0

说明SDK没有成功安装上,Tools->SDK Manage确保是否都有选上,特别是Command-line Tools,默认不会勾选,需要手动勾选

(2)NDK没有成功安装

What went wrong: A problem occurred evaluating root project 'AwesomeProject'. > Failed to apply plugin 'com.facebook.react.rootproject'. > A problem occurred configuring project ':app'. > CXX1101 NDK at C:\Users\52646\AppData\Local\Android\Sdk\ndk\27.1.12297006 did not have a source.properties file ,重新安装NDK

(3)info Installing the app...

IOException: https://dl.google.com/android/repository/addons_list-6.xml

java.net.ConnectException: Connection timed out: connect

IOException: https://dl.google.com/android/repository/addons_list-5.xml

java.net.ConnectException: Connection timed out: connect

IOException: https://dl.google.com/android/repository/addons_list-4.xml

java.net.ConnectException: Connection timed out: connect

IOException: https://dl.google.com/android/repository/addons_list-3.xml

java.net.ConnectException: Connection timed out: connect

IOException: https://dl.google.com/android/repository/addons_list-2.xml

java.net.ConnectException: Connection timed out: connect

IOException: https://dl.google.com/android/repository/addons_list-1.xml

java.net.ConnectException: Connection timed out: connect

需要设置一下代理模式为不代理

(4)

* What went wrong:

Could not determine the dependencies of task ':react-native-safe-area-context:generateDebugRFile'.

执行npm i --legacy-peer-deps 再执行yarn android/npx react-native run-android即可

Demo项目已提交github main分支:https://github.com/applebring/react-native-protosystem.git

总结:安装过程结合日志和npx react-native doctor进行问题排查,再结合各种网站的资源搜索,可以很好的解决问题,如果有不对的地方,也欢迎指出~

相关推荐
半个落月8 小时前
用 React 搭一个 WebGPU 模型加载页:从状态驱动到可复用进度条
前端·react.js
无人生还9 小时前
第 1 篇:从 Vue3 到 React 的思维转变
前端·vue.js·react.js
breeze jiang10 小时前
从原生事件到 React 组件化:用状态驱动模型加载进度 UI
前端·react.js·ui
名字还没想好☜11 小时前
React setState 连续调用「丢更新」排查:批量更新与函数式更新
前端·javascript·react.js·react·usestate
sugar__salt11 小时前
DeepSeek-R1 WebGPU (1):在浏览器里跑大模型
react.js·reactjs·react·端模型
我命由我1234512 小时前
Android 开发问题:java.lang.NoSuchMethodError:No virtual method readAllBytes()
android·java·java-ee·kotlin·android studio·android-studio·android runtime
张元清12 小时前
React useCookie Hook:把 Cookie 变成响应式状态(2026)
javascript·react.js
索西引擎13 小时前
【React】Immer.js 在现代 Redux 生态中的角色:不可变性保障的工程化实现与开发体验优化
前端·javascript·react.js
kisshyshy13 小时前
《川剧变脸 × React 状态管理?我在浏览器里跑了个端侧大模型》
前端·react.js·架构
只一13 小时前
端侧AI实战第二章:React组件工程化 + 事件系统 + 可复用进度条(WebGPU模型加载底座)
前端·react.js