从 React Native 到 Expo：快速实现跨平台开发

njr大约 4 分钟约 1312 字

随着移动开发的需求日益增长，跨平台开发框架成为开发者的首选。其中，React Nativeopen in new window 和 Expoopen in new window 是两种备受关注的技术路线。这篇文章将从 React Native 的基础出发，探讨 Expo 的优势，并介绍如何搭建 Expo 项目、CI/CD 流程及开发体验。

为什么选择 Expo 而不是纯 React Native？

React Native 是一个基于 JavaScript 的开源框架，支持使用一套代码构建 iOS 和 Android 应用。Expo 则是围绕 React Native 构建的一套工具和服务，提供了一种更简便的开发体验。

核心对比

特性	React Native CLI	Expo
学习曲线	较陡，需要配置 Xcode 或 Android Studio	平缓，使用 Expo Go 即可快速启动
项目启动速度	慢，需要较多依赖安装	快，仅需 Node.js 和手机或模拟器
社区支持和扩展性	强，自由配置	强，但受限于 Expo 生态
构建和打包	手动配置	提供托管的打包服务
原生模块支持	灵活，但需要手动集成	有限，但支持 EAS (Expo Application Services) 解决方案

适用场景

React Native CLI：适合有移动开发经验或对原生模块有较高定制化需求的开发者。
Expo：更适合快速构建 MVP（Minimum Viable Product）或移动开发新手。

如何搭建一个 Expo 项目

Expo 的上手非常简单，只需几步即可构建一个跨平台应用。

环境准备

安装最新版本的 Node.js。
安装 Expo CLI：
```
npm install -g expo-cli
```
确保设备上安装了 Expo Goopen in new window。

创建项目

使用以下命令快速创建一个 Expo 项目：

npx create-expo-app@latest

CI/CD 流程

Expo 提供了托管服务 EAS，用于自动化构建、部署和发布。

配置 EAS CLI

安装 EAS CLI：
```
npm install -g eas-cli
```
初始化 EAS：
```
eas init
```
这会生成一个 eas.json 文件，用于配置构建流程。

注

如果你是 monorepo 项目，需要在 expo 项目目录下使用 eas-cli 来初始化 EAS。

配置构建

在 eas.json 中添加构建配置，例如：

{
  "build": {
    "production": {
      "ios": {
        "distribution": "app-store"
      },
      "android": {
        "buildType": "apk"
      }
    }
  }
}

运行构建

构建 iOS 和 Android 应用：

eas build --platform all

完成后，你会收到构建链接，可以下载或分发应用。

可以在官网 dashboard 中查看构建进度。

配置 GitHub CI/CD

expo 提供了 expo-github-actionopen in new window 来配置 GitHub CI/CD。

提示

更多配置请参考 expo-github-actionopen in new window。

需要在 expo.dev 中生成一个 token，并配置到 GitHub 仓库的 secrets 中。

下面是个人项目 imperial-kitchenopen in new window 中的部分配置，仅供参考。

name: PR Preview

on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  eas-preview:
    runs-on: ubuntu-latest

    permissions:
      pull-requests: write

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20.10.0
          cache: yarn

      - name: Setup Expo and EAS
        uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}

      - name: Install dependencies
        run: yarn install

      - name: Change env
        working-directory: ./apps/mobile
        run: |
          EXPO_PUBLIC_BASE_URL=http://${{ secrets.TEST_DEPLOY_HOST }}:${{ secrets.TEST_DEPLOY_PORT }}
          echo $EXPO_PUBLIC_BASE_URL
          echo "EXPO_PUBLIC_BASE_URL=$EXPO_PUBLIC_BASE_URL" >> .env

      - name: Trigger EAS Preview
        uses: expo/expo-github-action/preview@v8
        id: preview
        with:
          working-directory: ./apps/mobile
          command: eas update --auto --branch ${{ github.event.pull_request.head.ref }}