React Native + Expo搭建APP项目+安卓模拟器

Expo 尝试一下就好,毕竟参考代码太少,相当于闭关造轮子,不建议。

一、需要的工具

**1.**node.js,推荐使用(TLS版本),版本不是太低就行,测试用的v20.12.2的Node

2. 开发工具 VS CODE或者android studio,Expo推荐使用 VS CODE

  1. JDK17,并配置环境变量,一定是JDK17。

**3.**下载一个android studio,这个主要要用 android SDK创建模拟器,供调试使用。或者可以纯粹使用一个模拟器试试。比如"雷电模拟器"

二、环境准备

设置你的环境 - Expo 中文网

**1.**安装Android Studio,没什么特别注意的,默认安装就行,修改一下安装路径

安装Android Studio的过程中它会提示设置镜像代理地址

Andriod Studio 设置HTTP Proxy 参考设置代理

开源镜像站 | 大连东软信息学院

**2.**设置ANDROID_HOME环境变量

正常安装完Android Studio,SDK在 C:\Users\你的电脑用户名\AppData\Local\这个路径下

因为C盘有时候有权限问题,把SDK文件夹给挪到其他盘。

自己配置的环境变量

顺便把adb环境变量也加进去,vscode中启动应用的时候,就不用打开Android Studio再打开模拟器了。

挪完SDK后记得修改Android Studio的SDK路径

**3.**创建安卓模拟器

打开 Android Studio

或者

这两个界面 都能创建。

三、创建项目

npx create-expo-app@latest

根据提示输入你自己的项目名称

四、启动项目

启动之前 修改一下 maven仓库的地址,下载还是依靠gradle下载的。

执行启动命令

五、在模拟器中运行

记得先打开你的模拟器,并且是开发者模式,允许USB调试。

在此界面的 命令行 按键盘 "a"字母,就会运行在模拟运行app。

查看自己的模拟器IP,也就是手机的IP地址,因为电脑和模拟器是通过adb建立的网络。

Android SDK下的platform-tools文件夹中有adb.exe,可以能把adb.exe配置在环境变量里。

启动模拟器后查看adb组件的网络配置:

app 图标

选择js debbug 就可以在模拟器中调试。

六、调试结果

相关推荐
sealaugh321 天前
react native(学习笔记第四课) 英语打卡微应用(3)-ocr的文字转化成语音文件(tts)
笔记·学习·react native
wordbaby2 天前
如何封装一个生产级的 React Native 分页列表 Hook
前端·react native·react.js
沐言人生4 天前
ReactNative 源码分析5——ReactActivity之启动RN应用
android·react native
沐言人生5 天前
ReactNative 源码分析4——ReactActivity之加载JSBundle
android·react native
沐言人生6 天前
ReactNative 源码分析3——ReactActivity之初始化RN应用
android·react native
一个扣子6 天前
Hermes 未来路线图:2025 年起的新特性与 React Native New Architecture 协同
react native·未来发展·路线图·hermes·字节码diffing·性能增强
沐言人生7 天前
React Native 源码分析1——HybridData 机制深度分析
android·react native
空中海7 天前
01 React Native 基础、核心组件与布局体系
javascript·react native·react.js
Yue1687 天前
一文教你五分钟学会Zustand,React状态管理更加方便!
react native
空中海7 天前
03 性能、动画与 React Native 新架构
react native·react.js·架构