配置多个应用变体

编辑

了解如何配置动态应用配置，以便在单个设备上安装多个应用变体。

在本章中，我们将配置我们的项目，以便在单个设备上同时运行多个构建类型（开发、预览、生产）。此设置将允许我们测试应用开发的各个阶段，而无需卸载和重新安装不同版本。

每个变体需要一个唯一的 Android 应用程序 ID 和 iOS Bundle 标识符，以便在一台设备上进行同时安装。以下是我们在 app.json 文件中设置的 ID：

app.json

{
  "ios": {
    "bundleIdentifier": "com.yourname.stickersmash"
    %%placeholder-start%%... %%placeholder-end%%
  },
  "android": {
    "package": "com.yourname.stickersmash"
    %%placeholder-start%%... %%placeholder-end%%
  }
}

添加 app.config.js 以实现动态配置

app.json 包含应用相关的配置，采用 JSON 文件。它是静态的，如果我们想为某些属性使用动态值则并不理想。我们将根据环境变量为所有构建配置添加不同的 Android 应用程序 ID 和 iOS Bundle 标识符。

在项目的根目录中创建一个名为 app.config.js 的新文件。
在 app.config.js 中，导出一个默认函数，该函数接受 config 作为参数。然后，我们将解构 config 以复制来自 app.json 的所有现有属性。

app.config.js

export default ({ config }) => ({
  ...config,
});

根据环境更新动态值

为了识别构建类型，我们在 app.config.js 中添加两个名为 IS_DEV 和 IS_PREVIEW 的环境变量，分别用于 development 和 preview 构建配置：

app.config.js

const IS_DEV = process.env.APP_VARIANT === 'development';
const IS_PREVIEW = process.env.APP_VARIANT === 'preview';

接着，添加两个函数以动态更改应用名称、Android 应用程序 ID 和 iOS Bundle 标识符：

app.config.js

const getUniqueIdentifier = () => {
  if (IS_DEV) {
    return 'com.yourname.stickersmash.dev';
  }

  if (IS_PREVIEW) {
    return 'com.yourname.stickersmash.preview';
  }

  return 'com.yourname.stickersmash';
};

const getAppName = () => {
  if (IS_DEV) {
    return 'StickerSmash (Dev)';
  }

  if (IS_PREVIEW) {
    return 'StickerSmash (Preview)';
  }

  return 'StickerSmash: Emoji Stickers';
};

我们将使用 getAppName() 为应用分配动态 name 值，并使用 getUniqueIdentifier() 来区分开发和预览构建的 android.package 和 ios.bundleIdentifier：

app.config.js

export default ({ config }) => ({
  ...config,
  name: getAppName(),
  ios: {
    ...config.ios,
    bundleIdentifier: getUniqueIdentifier(),
  },
  android: {
    ...config.android,
    package: getUniqueIdentifier(),
  },
});

配置 eas.json

在 eas.json 中，添加 APP_VARIANT 环境变量：

eas.json

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "env": {
        "APP_VARIANT": "development"
      }
    },
    "preview": {
      "distribution": "internal",
      "env": {
        "APP_VARIANT": "preview"
      }
    }
    %%placeholder-start%%... %%placeholder-end%%
  }
}

运行 eas build --profile development 现在将把 APP_VARIANT 设置为 development。

注意：由于我们更改了 Android 应用程序 ID 和 iOS Bundle 标识符，EAS CLI 将提示我们为 Android 生成新的 Keystore 和为 iOS 生成新的配置文件。要了解更多有关这些步骤的信息，请查阅前一章。

由于我们的 ios-simulator 构建配置扩展了 development，因此此配置自动应用于 iOS 模拟器。

运行开发服务器

在构建完成后，遵循前几章中的相同程序，将它们安装到设备或模拟器上。

由于我们通过 APP_VARIANT 环境变量识别我们的开发构建，因此在启动开发服务器时需要将其传递到命令中。为此，在我们项目的 package.json 的 "scripts" 字段中添加一个 dev 脚本：

package.json

{
  "scripts": {
    "dev": "APP_VARIANT=development npx expo start"
  }
}

运行 npm run dev 命令以启动开发服务器：

Terminal

- npm run dev

此脚本将在本地评估 app.config.js 并加载开发配置文件的环境变量。

现在，我们的开发构建将在 Android 和 iOS 上运行，显示来自 app.config.js 的修改后的应用名称。例如，下面的开发构建在 iOS 模拟器上运行。请注意，应用名称为 StickerSmash (Dev)：

您现在可以继续使用 app.json 进行静态值的配置，并使用 app.config.js 进行动态配置。

摘要

第五章：配置多个应用变体

我们成功创建了 app.config.js 以便进行动态配置，同时保持 **app.json** 中的静态配置不变，添加了环境变量到 eas.json 以配置特定的构建配置，并学习了如何使用自定义 package.json 脚本启动开发服务器。

Mark this chapter as read

在下一章中，了解什么是内部分发构建，为什么我们需要它们，以及如何创建它们。

Next: 创建和分享内部分发构建