Expo是什么？使用Expo创建ReactNative工程和构建

Joker`s smile

已于 2024-04-11 18:39:44 修改

阅读量1.1w

点赞数 33

文章标签： react native

于 2024-04-11 18:37:22 首次发布

本文链接：https://blog.csdn.net/qq_37819292/article/details/137638481

版权

一、Expo是啥？

中文官网：https://expo.nodejs.cn/get-started/expo-go/

Expo 是一款开源框架，适用于在 Android、iOS 和 Web 上原生运行的应用。Expo 汇集了移动和 Web 的精华，并支持构建和扩展应用的许多重要功能。

说人话：

基于React Native的一款上层框架
同时支持Android、iOS 和 Web的跨端开发
提供了Expo CLI脚手架、Expo Go沙箱、EAS 构建、EAS 提交、EAS 更新、Expo Router、Expo module API 等一系列扩展功能
通过Expo，避免了直接对原生开发，原生代码都由Expo构建产出。（但也支持自定义原生内容）
Expo SDK 接续了 React Native 核心库的结尾。它提供对许多设备和系统功能的访问，例如音频、条形码扫描、相机、日历、联系人、视频等。它还添加了其他强大的库，如更新、地图、OAuth 身份验证工具等。目前很多主流库都支持Expo，不支持的库也提供了接入方式。

部分操作需要科学上网，比如官网账号注册、本地编译的gradle仓库等

安装第三方库时，建议始终直接使用 npx expo install 而不是 npm install 或 yarn add，因为它允许 Expo CLI 在可能的情况下选择库的兼容版本，并警告你已知的不兼容性。
例如：

npx expo install expo-device

此文记录了Expo的工程搭建、构建应用到Expo Go 沙箱环境中、使用云端远程构建、使用本地构建。

二、使用Expo创建工程和构建

1、使用脚手架和Expo Router模板（也可以不用）初始化项目：

npx create-expo-app@latest --template tabs@50

初始化的项目，自动安装了ReactNative/expo router相关的库
在这里插入图片描述

2、在Expo Go沙箱环境中运行你的应用

Expo Go 是一个免费的 open-source 沙箱，用于在 Android 和 iOS 设备上学习和试验 React Native。可以在Goole应用商店下载（国内应用商店好像没有），或者后续步骤会自动安装。
注意：Expo不建议使用 Expo Go 来构建生产质量的应用，也就是说这个沙箱环境用来写写demo学习啥的，不要用来做正式开发

需要先将设备通过adb连接

adb reverse tcp:8081 tcp:8081

启动开发服务器

npm start

当你运行上述命令时，Expo CLI 启动 Metro 打包器，该打包器是一个 HTTP 服务器，它使用 Babel 编译应用的 JavaScript 代码；
在这里插入图片描述

在你的设备上运行应用
按a选择运行到android后，会在你的设备上安装Expo Go的应用，接下来，需要将Metro 编译后的js代码在 Expo Go沙箱环境运行。
方式1：在Expo Go 应用主页选项卡上的扫描二维码，然后扫描你在终端中看到的二维码。
方式2：在Expo Go 应用主页选项卡上的Enter URL manually，然后键入启动的开发服务器连接。

3、开发环境构建，创建开发版本

Expo 推荐构建开发版本进行项目开发，而不是使用Expo Go 沙箱环境。
Expo的开发版本，指的是是包含 expo-dev-client 包的应用的调试版本，可以完全控制原生运行时，可以使用安装任何原生库、修改任何项目配置或编写自己的原生代码，构建出自己的原生应用。
expo-dev-client 替换了RN默认的应用内开发工具UI，提供了扩展功能
为工程安装expo-dev-client包：

npx expo install expo-dev-client

3-1、EAS Build构建（远程构建）

EAS Build 是一项托管服务，用于为你的 Expo 和 React Native 项目构建应用二进制文件。
EAS Build 可供拥有 Expo 账户的任何人使用，可以在 https://expo.dev/signup注册（注册时会调用goole服务，需要科学上网，否则一直报错）

a、安装EAS CLI

npm install -g eas-cli

b、登录

eas login

你可以通过运行 eas whoami 来检查你是否已登录。

c、添加配置

eas build:configure

如果项目中配有为eas添加配置，直接执行eas build，会运行相同的过程。执行完成后会生成eas.json文件：

{
  "cli": {
    "version": ">= 7.7.0"
  },
  "build": {
    "development": {
       // 表明该构建依赖于 expo-dev-client。这些构建包括开发者工具
      "developmentClient": true,
      // 可以进行内部应用分发
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

它为每个平台定义了三个名为 “development”、“preview” 和 “production” 的构建配置文件（你可以有多个构建配置文件，如 “production”、“debug”、“testing” 等）。具体配置参考：使用 eas.json 配置 EAS 构建

d、为android应用构建.apk包

使用production配置构建部署版本AAB：没有指定–profile时，默认使用production配置，产物文件格式是安卓应用包 (AAB/.aab)。此格式针对分发到 Google Play 商店进行了优化。但是，AAB 无法直接安装在你的设备上。要将构建直接安装到 Android 设备或模拟器，你需要构建安卓包 (APK/.apk)。
使用development的配置构建开发版本APK：（包含开发工具和内部分发）
```
eas build -p android --profile development
```
使用preview的配置构建预览版本APK：（不包含开发工具，只能内部分发）
```
eas build -p android --profile preview
```

Android 应用签名凭据

如果你尚未为你的应用生成密钥库，你可以在build时通过选择 Generate new keystore 让 EAS CLI 为你处理，然后就完成了。密钥库安全地存储在 EAS 服务器上，可以通过 eas credentials 命令行进行管理。管理自动凭据
如果你之前使用 expo build:android 构建过应用，则可以在此处使用相同的凭据。
如果你想手动生成密钥库，请参阅手动创建 Android 凭证了解更多信息。

e、安装

在这里插入图片描述

安装到模拟器

构建完成后，CLI 将提示你自动下载并将其安装到 Android 模拟器上。出现提示时，按 Y 直接安装到模拟器上。

如果你有多个版本，你还可以随时运行 eas build:run 命令来下载特定版本并将其自动安装在 Android 模拟器上：
```
eas build:run -p android
```
安装到真机
直接下载apk文件安装或通过adb安装

3-2、EAS Build构建（在你本机上执行EAS build）

eas build --platform android --local
或
eas build --platform ios --local

一般不要在本地这样做，只有当云端构建无法找到问题，再尝试寻找问题，且在本地使用EAS Build一些属于云端的功能将不可用。
参考：了解如何使用 --local 标志在你的计算机或自定义基础架构上本地使用 EAS Build。

3-3、本地构建

// 本地构建android开发版本
npx expo run:android
// 本地构建ios开发版本
npx expo run:ios

你还可以添加 --device 标志来选择运行应用的设备 - 你可以选择物理连接的设备或模拟器/模拟器。
你可以传入 --variant release (Android) 或 --configuration Release (iOS) 来构建你的应用的生产版本。
这些编译命令最初运行 npx expo prebuild 以在构建之前生成原生目录（android 和 ios）（如果它们尚不存在）。如果它们已经存在，这将被跳过。
生成原生代码后，需要依赖本机的环境进行原生工程构建，如：node、jdk、 Android SDK 等
生成的原生代码是根据expo SDK 提供的模板生成，其中的gradle仓库等地址在国内网络可能无法正常访问，导致构建失败。