配置多个应用变体

添加 app.config.js 用于动态配置

🌐 Add app.config.js for dynamic configuration

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

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

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

根据环境更新动态值

🌐 Update dynamic values based on environment

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

🌐 To identify the build type, let's add two environment variables called IS_DEV andIS_PREVIEW for development and preview build profiles in app.config.js:

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

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

🌐 Then, 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 dynamic name values for the app and getUniqueIdentifier() to differentiate android.package and ios.bundleIdentifier for development and preview builds:

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

配置 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 Bundle 标识符，EAS CLI 会提示我们为 Android 生成新的密钥库，为 iOS 生成新的配置描述文件。想了解这些步骤的具体内容，请参阅上一章获取更多信息。

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

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

运行开发服务器

🌐 Run development server

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

由于我们使用 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):

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

🌐 You can now continue using app.json for static values and use app.config.js for dynamic values.