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 就可以在模拟器中调试。

六、调试结果

相关推荐
●VON2 小时前
React Native for OpenHarmony:ScrollView 事件流、布局行为与性能优化深度剖析
学习·react native·react.js·性能优化·openharmony
2601_949593652 小时前
高级进阶 React Native 鸿蒙跨平台开发:LinearGradient 玻璃拟态卡片
react native·react.js·harmonyos
摘星编程2 小时前
在OpenHarmony上用React Native:TopTab顶部标签页
react native·react.js·harmonyos
摘星编程3 小时前
用React Native开发OpenHarmony应用:NativeStack原生导航
javascript·react native·react.js
●VON3 小时前
从像素到语义:React Native Text 组件在 OpenHarmony 上的渲染哲学与工程实现
android·react native·react.js
摘星编程4 小时前
React Native鸿蒙版:KeyboardInteractive交互监听
react native·交互·harmonyos
2601_949593654 小时前
高级进阶 React Native 鸿蒙跨平台开发:SafeAreaView 沉浸式页面布局
react native·react.js·harmonyos
不爱吃糖的程序媛4 小时前
2026年鸿蒙跨平台开发:Flutter、React Native 及其他框架前瞻
flutter·react native·harmonyos
●VON4 小时前
React Native for OpenHarmony:Image 组件的加载、渲染与性能优化全解析
笔记·学习·react native·react.js·性能优化·openharmony
●VON4 小时前
React Native for OpenHarmony:FlatList 虚拟化引擎与 ScrollView 事件流的深度协同
javascript·学习·react native·react.js·von