首先让我吐槽一下，身为一位 web 开发人员处理 xcode 构建和 native deps 等问题是真的无奈！！

Expo vs Rn

Expo 和 React Native 是两个密切相关的工具，用于开发跨平台移动应用，但它们在使用方式和灵活性上有所不同。下面是对它们的详细介绍和对比：

React Native

React Native 是一个由 Facebook 开发的开源框架，允许开发者使用 JavaScript 和 React 构建原生移动应用。React Native 提供了一组原生组件，这些组件被渲染为原生视图，而不是 Web 视图。

优点：

  1. 跨平台开发：一次编写，可以在 iOS 和 Android 上运行。
  2. 性能好：使用原生组件，性能接近原生应用。
  3. 大社区和丰富的生态系统：有很多开源库和工具可以使用。
  4. 灵活性：允许深度访问原生功能和第三方原生模块。

缺点：

  1. 设置复杂：初学者可能需要花费更多时间来设置开发环境。
  2. 原生代码需求：有时候需要编写原生代码来实现特定功能。
  3. 升级困难：随着 React Native 版本的升级，应用维护可能变得复杂。

Expo

Expo 是一个基于 React Native 的开发工具套件，旨在简化 React Native 应用的开发过程。Expo 提供了一组工具和服务，使开发者无需处理原生代码即可快速开发、构建和部署应用。

优点：

  1. 简化开发流程：开发环境设置简单，无需安装 Android Studio 或 Xcode。
  2. 丰富的内置 API：提供了许多常用的 API，如相机、位置、通知等，开箱即用。
  3. 快速预览和测试：通过 Expo Go 应用，可以在真实设备上快速预览和测试应用。
  4. 无需原生代码：大部分情况下不需要编写原生代码。

缺点：

  1. 灵活性较低：受限于 Expo 提供的 API，如果需要使用不支持的原生功能，可能需要“弹出”到纯 React Native。
  2. 应用大小较大：由于包含了所有 Expo 提供的库，应用的初始大小可能较大。
  3. 依赖 Expo 服务：构建和发布应用依赖于 Expo 的在线服务。

Ignite

本着能机写绝不手写的原则，我又发现了一个宝藏模板脚手架ignite，能够同时创建 expo 项目和 reactnative 项目，果断入手！

ignite 初始化如下目录结构：

Ignite Boilerplate

​ 预设如下库：

  • React Native
  • React Navigation
  • MobX-State-Tree (Why not Redux?)
  • MobX-React-Lite
  • TypeScript
  • AsyncStorage (integrated with MST for restoring state)
  • apisauce (to talk to REST servers)
  • Reactotron-ready (and pre-integrated with MST)
  • Supports Expo (and Expo web) out of the box
  • About a dozen prebuilt components to build out your UI with
  • And more!

expo 简化了Rn，Ignite简化了expo

关于xcode和native deps的困扰

当遇到需要调用本地库的功能时候，往往需要抓耳挠腮，虽然有第三方库的支持，但是在xcode编译的时候弹出红色警告是多么恐怖的事情！

幸好expo的eas让我免去了很多困扰，无需xcode和担忧native deps

EAS 主要包含 EAS Build、EAS Submit、EAS Update、EAS Metadata、EAS Insights

EAS Build

EAS Build 是一个托管服务，用于为您的 Expo 和 React Native 项目构建应用程序二进制文件。

它通过提供默认设置，使得构建适用于 Expo 和 React Native 项目的应用程序变得简单且易于自动化，同时还可以为您处理应用程序签名凭证。此外，它还通过内部分发（使用临时和/或企业级“通用”配置文件），使与团队共享构建变得前所未有的简单，并与 EAS Submit 深度集成用于应用商店提交，还对 expo-updates 库提供一流的支持。

无论您是否使用托管工作流，它都旨在适用于任何原生项目。这是从 npx create-expo-app 或 npx react-native init 到应用商店的最快途径。

一般在eas.json中配置构建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// eas.json
{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

其中 developmentClient开启则是 development builds ，相当于自定义 的EXPO GO。

可以有多个构建目标，例如 development、preview、product，并且一个物理机可以同时安装多个构建，操作如下：

1
2
3
4
5
6
7
8
9
10
11
export default {
  name: 'MyApp',
  slug: 'my-app',
  ios: {
    bundleIdentifier: 'com.myapp',
  },
  android: {
    package: 'com.myapp',
  },
};

前提

需要拥有不同 bundle id

app.json

1
2
3
4
5
6
7
8
9
10
11
12
{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "ios": {
      "bundleIdentifier": "com.myapp"
    },
    "android": {
      "package": "com.myapp"
    }
  }
}

eas.json

1
2
3
4
5
6
7
8
{
  "build": {
    "development": {
      "developmentClient": true
    },
    "production": {}
  }
}

app.json转换为app.config.ts

app.config.ts

1
2
3
4
5
6
7
8
9
10
export default {
  name: 'MyApp',
  slug: 'my-app',
  ios: {
    bundleIdentifier: 'com.myapp',
  },
  android: {
    package: 'com.myapp',
  },
};

在 app.config.js 文件中，添加一个名为 IS_DEV 的环境变量，用于根据该变量切换 android.package 和 ios.bundleIdentifier。

app.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
const IS_DEV = process.env.APP_VARIANT === 'development';

export default {
  name: IS_DEV ? 'MyApp (Dev)' : 'MyApp',
  slug: 'my-app',
  ios: {
    bundleIdentifier: IS_DEV ? 'com.myapp.dev' : 'com.myapp',
  },
  android: {
    package: IS_DEV ? 'com.myapp.dev' : 'com.myapp',
  },
};

在上述示例中，环境变量 IS_DEV 用于区分开发环境和生产环境。根据其值，为每个变体设置不同的应用程序 ID 或捆绑标识符。

Configuration for EAS Build

在 eas.json 文件中，通过使用 env 属性设置 APP_VARIANT 环境变量，以便使用 development 配置文件运行构建：

eas.json

1
2
3
4
5
6
7
8
9
10
11
{
  "build": {
    "development": {
      "developmentClient": true,
      "env": {
        "APP_VARIANT": "development"
      }
    },
    "production": {}
  }
}

现在，当您运行 eas build --profile development 时，在本地和 EAS Build 构建器上评估 app.config.js 时，环境变量 APP_VARIANT 将被设置为 development。

Using the development server

当您启动开发服务器时，您需要运行 APP_VARIANT=development npx expo start（如果您使用的是 Windows，则使用相应的平台等效命令）。

package.json

1
2
3
4
5
{
  "scripts": {
    "dev": "APP_VARIANT=development npx expo start"
  }
}

Using production variant

当您运行 eas build --profile production 时，APP_VARIANT 环境变量不会被设置，构建将作为生产变体运行。

感想

拥抱expo