配置多个应用变体

添加 app.config.js 以进行动态配置

app.json 在 JSON 文件中包含与应用相关的配置。它是静态的，如果我们想使用某些属性的动态值，它并不理想。我们将基于环境变量为所有构建配置文件添加不同的 Android Application ID 和 iOS Bundle Identifier。

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

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

根据环境更新动态值

为了识别构建类型，让我们在 app.config.js 中为 development 和 preview 构建配置文件添加两个环境变量，分别叫做 IS_DEV 和IS_PREVIEW：

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

然后，添加两个函数，动态更改应用名称、Android Application ID 和 iOS Bundle Identifier：

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（开发版）';
  }

  if (IS_PREVIEW) {
    return 'StickerSmash（预览版）';
  }

  return 'StickerSmash：表情贴纸';
};

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

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

配置 eas.json

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

{
  "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 Application ID 和 iOS Bundle Identifier，EAS CLI 会提示我们为 Android 生成一个新的 Keystore，并为 iOS 生成一个新的 provisioning profile。要了解这些步骤包含什么，请参阅上一章以获取更多信息。

由于我们的 ios-simulator 构建配置文件继承自 development，因此此配置会自动应用于 iOS 模拟器。

运行开发服务器

构建完成后，请按照前几章中的相同步骤将它们安装到设备或模拟器上。

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

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

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

此脚本会在本地计算 app.config.js，并为 development 配置文件加载环境变量。

现在，我们的开发构建将在 Android 和 iOS 上运行，并显示来自 app.config.js 的修改后的应用名称。例如，下面这个开发构建正在 iOS 模拟器上运行。可以看到应用名称是 StickerSmash（开发版）：

你现在可以继续使用 app.json 来保存静态值，并使用 app.config.js 来保存动态值。