博客更新日志 GitHub 简中文档

启动画面和应用图标

编辑页面

了解如何向你的 Expo 项目添加启动画面和应用图标。

启动画面和应用图标是移动应用的基本元素。它们在应用的用户体验和品牌塑造中起着重要作用。本指南提供了如何创建并将它们添加到你的应用中的步骤。

创建应用图标和启动画面

创建应用图标和启动画面

查看一份详细演示，了解如何为 Expo 项目创建应用图标和启动画面。

启动画面

启动画面，也称为启动屏幕，是用户打开应用时看到的第一个界面。它会在应用加载期间保持可见。你还可以使用原生的 SplashScreen API 来控制启动画面消失的时机。

expo-splash-screen 内置了一个配置插件，可让你配置启动图标和背景颜色等属性。

警告不要使用 Expo Go 或开发构建来测试你的启动画面。当启动画面可见时，Expo Go 会渲染你的应用图标，这可能会干扰测试。开发构建包含 expo-dev-client，它有自己的启动画面，可能会导致冲突。请改用预览构建或生产构建。

1

创建启动画面图标

要创建启动画面图标，你可以使用这个 Figma 模板。它为 Android 和 iOS 的图标与启动图像提供了最基础的设计。

推荐：

使用 1024x1024 的图片。
使用 .png 文件。
使用透明背景。

2

将启动图标导出为 .png

创建启动画面图标后，将其导出为 .png 并保存到 assets/images 目录中。默认情况下，Expo 使用 splash-icon.png 作为文件名。如果你决定更改启动画面文件的名称，请务必在下一步中使用该名称。

注意：目前，仅支持 .png 图片作为 Expo 项目中的启动画面图标。如果你使用其他图片格式，应用的生产构建将会失败。

3

配置启动画面图标

打开应用配置文件，在 plugins 下设置以下属性：

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-splash-screen",
        {
          "backgroundColor": "#232323",
          "image": "./assets/images/splash-icon.png",
          "dark": {
            "image": "./assets/images/splash-icon-dark.png",
            "backgroundColor": "#000000"
          },
          "imageWidth": 200
        }
      ]
    ]
  }
}

要测试你的新启动画面，请为内部分发或生产环境构建你的应用，具体可参考 Android 和 iOS 指南。

可配置的启动画面属性

了解 SplashScreen API 的可配置属性。

分别为 Android 和 iOS 配置 expo-splash-screen 属性

expo-splash-screen 还支持 android 和 ios 属性，用于为特定平台配置启动画面。请参见以下示例：

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-splash-screen",
        {
          "ios": {
            "backgroundColor": "#ffffff",
            "image": "./assets/images/splash-icon.png",
            "resizeMode": "cover"
          },
          "android": {
            "backgroundColor": "#0c7cff",
            "image": "./assets/images/splash-android-icon.png",
            "imageWidth": 150
          }
        }
      ]
    ]
  }
}

没有使用 prebuild？

如果你的应用没有使用 Expo Prebuild（以前称为 managed workflow）来生成原生的 android 和 ios 目录，那么应用配置中的更改将不会生效。更多信息请参见如何手动自定义配置。

故障排查：iOS 上没有出现新的启动画面

对于 SDK 52 及更早版本，在 iOS 开发构建中，启动屏幕有时会在不同构建之间保持缓存，使测试新图片变得更困难。Apple 建议在重新构建前清除 derived data 目录，这可以通过运行 Expo CLI 来完成：

Terminal

- npx expo run:ios --no-build-cache

更多信息请参见 Apple 关于测试启动屏幕的指南。

应用图标

应用图标是你的应用用户在设备主屏幕和应用商店中看到的内容。Android 和 iOS 有不同且严格的要求。

1

创建应用图标

要创建应用图标，你可以使用这个 Figma 模板。它为 Android 和 iOS 的图标与启动图像提供了最基础的设计。

2

将图标图片导出为 .png

创建应用图标后，将其导出为 .png 并保存到 assets/images 目录中。默认情况下，Expo 使用 icon.png 作为文件名。如果你决定使用其他文件名，请务必在下一步中使用它。

3

在应用配置中添加图标

打开应用配置，并将 icon 属性的值设置为本地路径，以便将其指向你新的应用图标：

app.json

{
  "icon": "./assets/images/icon.png"
}

Android 和 iOS 的自定义配置提示

Android

可以使用 android.adaptiveIcon 属性进一步自定义 Android 图标，它会覆盖前面提到的两个设置。

Android 自适应图标由两个独立图层组成 — 前景图像和背景颜色或背景图像。这使操作系统能够将图标裁切成不同形状，并支持视觉效果。对于 Android 13 及更高版本，操作系统支持主题化应用图标，它使用壁纸和主题来确定由设备主题设置的颜色。

你提供的设计应遵循用于启动器图标的 Android 自适应图标指南。你还应该：

使用 .png 文件。
使用 android.adaptiveIcon.foregroundImage 属性指定前景图像的路径。
使用 android.adaptiveIcon.monochromeImage 属性指定单色图像的路径。
默认背景颜色为白色；若要指定其他背景颜色，请使用 android.adaptiveIcon.backgroundColor 属性。你也可以改用 android.adaptiveIcon.backgroundImage 属性指定背景图像。请确保它与前景图像具有相同的尺寸。

你还可以为不支持自适应图标的旧版 Android 设备提供单独的图标。你可以通过 android.icon 属性来实现。这个单一图标将是前景层和背景层的组合。

请参见 Apple 最佳实践，以确保你的图标看起来专业，例如在不同壁纸上测试图标，并避免在产品字标旁边放置文本。请提供至少 512x512 像素的图标。

iOS

图标制作器

图标制作器

了解如何使用新的图标制作器为 Expo 项目创建应用图标。

对于 iOS，你的应用图标应遵循 Apple 人机界面指南。你可以使用 Icon Composer 应用来创建你的应用图标。这将输出一个 .icon 目录，你可以将其添加到项目的 assets 目录中。然后你可以在应用配置中提供该目录的路径。使用此方法时，深色模式支持由 Icon Composer 处理，因此你无需提供变体。

信息注意：通过 ios.icon 提供 Icon Composer .icon 目录的支持从 SDK 54 开始可用。

app.json

{
  "expo": {
    "ios": {
      "icon": "./assets/app.icon"
    }
  }
}

另外，之前提供图片的方式仍然受支持。你应该：

使用 .png 文件。
1024x1024 是一个不错的尺寸。如果你有一个使用 npx create-expo-app 创建的 Expo 项目， EAS Build 会为你生成其他尺寸。若是裸 React Native 项目，请自行生成图标。EAS Build 生成的最大尺寸是 1024x1024。
图标必须是严格的正方形。例如，1023x1024 的图标无效。
确保图标填满整个正方形，没有圆角或其他透明像素。操作系统会在适当的时候对你的图标进行裁切。
使用 ios.icon 指定不同系统外观的图标（例如深色和着色）是可以提供的。如果指定了，这将覆盖应用配置文件顶部的图标键。请参见下面的示例：

app.json

{
  "expo": {
    "ios": {
      "icon": {
        "dark": "./assets/images/ios-dark.png",
        "light": "./assets/images/ios-light.png",
        "tinted": "./assets/images/ios-tinted.png"
      }
    }
  }
}