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

六、调试结果

相关推荐
传奇开心果编程13 小时前
【现代声明式UI学与练】第4课 列表渲染与 key——如何高效渲染列表、key 的作用、列表重排时的状态保持
学习·flutter·react native·ui·swiftui·android jetpack
传奇开心果编程1 天前
【现代声明式UI学与练】第7课 组件通信——父传子、子传父、跨层级通信、状态提升与 Context
学习·flutter·react native·ui·swiftui·android jetpack
500842 天前
React Native for OpenHarmony 实战:三方库 react-native-url-polyfill 的鸿蒙化适配指南
javascript·react native·react.js·性能优化·electron·harmonyos
传奇开心果编程2 天前
【现代声明式UI学与练】第9课 性能优化——渲染优化、列表优化、内存优化、启动优化
学习·flutter·react native·ui·性能优化·swiftui·android jetpack
500842 天前
React Native for OpenHarmony 实战:三方库 react-native-volume-control 的鸿蒙化适配指南
javascript·react native·react.js·electron·harmonyos
500847 天前
React Native for OpenHarmony 实战:三方库 react-native-crypto-js 的鸿蒙化适配指南
javascript·react native·性能优化·electron·harmonyos
500847 天前
React Native for OpenHarmony 实战:三方库 react-native-device-name 的鸿蒙化适配指南
深度学习·react native·react.js·机器学习·harmonyos
500847 天前
React Native for OpenHarmony 实战:三方库 react-native-torch 的鸿蒙化适配指南
javascript·react native·react.js·harmonyos
500847 天前
React Native for OpenHarmony 实战:三方库 react-native-device-uptime 的鸿蒙化适配指南
javascript·分布式·react native·react.js·harmonyos
是你的小橘呀7 天前
React Native 3:useEffect 自动请求接口 + 搜索功能 + 封装 Loading 组件
react native