Expo 入门：更快速构建 React Native 应用的方式

如果你是一名想要构建移动应用但又不想与 Xcode 或 Android Studio 搏斗的 JavaScript 开发者,那么你来对地方了。React Native 让你可以用 JavaScript 构建跨平台应用,但初始设置可能令人望而生畏。这就是 Expo 的用武之地——它消除了复杂性,让你立即开始构建。

什么是 Expo?为什么要使用它?

Expo 是一个构建在 React Native 之上的框架和平台,它处理了移动开发中令人头疼的部分。可以把它看作是自带电池的 React Native。你编写 JavaScript,Expo 处理原生配置、构建过程和设备 API。

以下是 Expo 特别有用的原因:

• 无需原生设置:跳过安装 Xcode、Android Studio 或配置构建工具
• 即时测试:使用 Expo Go 在几秒钟内在手机上预览更改
• 托管工作流:Expo 处理证书、应用签名和构建配置
• 内置 API:无需原生代码即可访问相机、位置、通知等功能
• 默认跨平台:一套代码库可在 iOS、Android 和 Web 上运行

使用 create-expo-app 创建你的第一个 Expo 应用

使用 Expo 启动一个新的 React Native 项目只需要一条命令。打开终端并运行:

npx create-expo-app my-app
cd my-app
npx expo start

就是这样。无需全局安装,无需复杂配置。create-expo-app 命令会设置你需要的一切:项目结构、依赖项和配置文件。

当你运行 npx expo start 时,你会在终端中看到一个二维码。这就是魔法发生的地方。

开发循环:编码、保存并即时查看更改

使用 Expo Go 测试

在你的 iOS 或 Android 设备上下载 Expo Go 应用。扫描终端中的二维码,你的应用就会立即加载到手机上。无需 USB 线缆,无需构建过程。

对代码进行更改:

// App.js
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Hello, Expo!</Text>
    </View>
  );
}

保存文件,你的手机会立即更新。这种热重载循环使 React Native 开发感觉像 Web 开发一样——快速且迭代。

当你需要更多功能时:开发构建

Expo Go 涵盖了大多数开发需求,但有时你需要自定义原生代码或特定的原生模块。这时你需要创建开发构建——本质上是为你的应用量身定制的 Expo Go 自定义版本。

npx expo install expo-dev-client
npx expo run:ios  # 或 run:android

开发构建为你提供了纯 React Native 的灵活性以及 Expo 工具的便利性。

使用 EAS Build 构建和部署

当你准备发布时,EAS Build 会在云端处理复杂的构建过程。无需维护构建环境或手动处理证书。

设置 EAS Build

首先,安装 EAS CLI:

npm install -g eas-cli
eas login

配置你的项目以进行构建:

eas build:configure

创建生产构建

使用单个命令为 iOS 或 Android 构建:

eas build --platform ios
eas build --platform android

EAS Build 处理:

• 代码签名和证书
• 原生依赖项
• 构建优化
• 分发到应用商店

构建在 Expo 的服务器上运行,因此你不需要 Mac 就能构建 iOS 应用。完成后,你会获得应用二进制文件的下载链接或直接提交到应用商店。

完整的 Expo 工作流

以下是所有内容如何协同工作:

1. 初始化:使用 create-expo-app 启动项目
2. 开发:编写 JavaScript,使用 Expo Go 即时测试
3. 迭代:热重载立即显示更改
4. 构建:准备好生产时使用 EAS Build
5. 部署:直接提交到应用商店或内部分发
6. 更新:无需应用商店审核即可通过 OTA 推送 JavaScript 更新

这个工作流消除了 React Native 开发的传统痛点。不再有”在我的机器上可以运行”的问题,不再有证书头疼的问题,不再有平台特定的构建问题。

结论

Expo 将 React Native 开发从一个复杂的、平台特定的过程转变为像 Web 开发一样简单直接的过程。使用 create-expo-app,你可以在几分钟而不是几小时内编写和测试代码。使用 Expo Go,你可以以 Web 开发的速度进行迭代。使用 EAS Build,你可以在没有传统移动开发开销的情况下进行部署。

如果你因为设置复杂性而对移动开发犹豫不决,Expo 消除了这一障碍。从 npx create-expo-app 开始,在你的咖啡变凉之前,你就能在手机上运行一个可工作的应用。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.