配置多个应用变体

将 app.json 转换为 app.config.js 以进行动态配置

¥Convert app.json to app.config.js for dynamic configuration

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

¥app.json contains app-related configuration in a JSON file. It's static and isn't ideal if we want to use dynamic values for certain properties. We're going to add different Android Application IDs and iOS Bundle Identifiers for all build profiles based on environment variables.

• 在代码编辑器中，将 app.json 重命名为 app.config.js。

  ¥In the code editor, rename app.json to app.config.js.

• 在 app.config.js 中，为 development 和 preview 构建配置文件添加名为 IS_DEV 和 IS_PREVIEW 的环境变量：

  ¥In app.config.js, add environment variables called IS_DEV andIS_PREVIEW for development and preview build profiles:

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

• 添加两个动态更改应用名称、Android 应用 ID 和 iOS 打包包标识符的函数：

  ¥Add two functions that dynamically change the app name, Android Application ID and 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 (Dev)';
  }

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

  return 'StickerSmash: Emoji Stickers';
};

• 我们将使用 getAppName() 为应用分配不同的 name 值，并使用 getUniqueIdentifier() 来区分开发和预览版本的 android.package 和 ios.bundleIdentifier：

  ¥We'll use getAppName() to assign varying name values for the app and getUniqueIdentifier() to differentiate android.package and ios.bundleIdentifier for development and preview builds:

export default {
  name: getAppName(),
  %%placeholder-start%%... %%placeholder-end%%
  ios: {
    bundleIdentifier: getUniqueIdentifier(),
    %%placeholder-start%%... %%placeholder-end%%
  },
  android: {
    package: getUniqueIdentifier(),
    %%placeholder-start%%... %%placeholder-end%%
  },
};

配置 eas.json

¥Configure eas.json

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

¥In eas.json, add the APP_VARIANT environment variable:

{
  "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。

¥Running eas build --profile development will now set APP_VARIANT to development.

注意：由于我们更改了 Android 应用 ID 和 iOS 打包包标识符，EAS CLI 将提示我们为 Android 生成新的密钥库，并为 iOS 生成新的配置文件。要了解有关这些步骤包括的内容的更多信息，请参阅上一章以获取更多信息。

¥Note: Since we changed the Android Application ID and iOS Bundle Identifier, the EAS CLI will prompt us to generate a new Keystore for Android and a new provisioning profile for iOS. To learn more about what these steps include, see the previous chapter for more information.

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

¥Since our ios-simulator build profile extends development, this configuration is automatically applied for iOS Simulators.

运行开发服务器

¥Run development server

构建完成后，按照前面章节中的相同过程将它们安装在设备或模拟器/模拟器上。

¥After builds are complete, follow the same procedure from previous chapters to install them on a device or emulator/simulator.

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

¥Since we're identifying our development build with the APP_VARIANT environment variable, we need to pass it to the command when starting the development server. To do this, add a dev script in the "scripts" field of our project's package.json:

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

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

¥Run the npm run dev command to start the development server:

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

¥This script will evaluate app.config.js locally and load the environment variable for the development profile.

现在，我们的开发版本将在 Android 和 iOS 上运行，并显示 app.config.js 中修改后的应用名称。例如，以下开发版本正在 iOS 模拟器上运行。看到应用名称是 StickerSmash (Dev)：

¥Now, our development build will run on both Android and iOS, displaying the modified app name from app.config.js. For example, the below development build is running on an iOS Simulator. See that the app name is StickerSmash (Dev):