启动画面和应用图标

编辑

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

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

Create an App Icon and Splash Screen

See a detailed walkthrough on how to create an app icon and splash screen for an Expo project.

启动画面

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

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

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

创建启动画面图标

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

将启动图标导出为 .png 格式

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

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

配置启动屏幕图标

打开应用配置文件，在 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 的指南。

可配置的启动屏属性

了解启动屏 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（以前称为 托管工作流 ）来生成原生的 android 和 ios 目录，那么应用配置中的更改将不会生效。更多信息请参见如何手动自定义配置。

故障排除：iOS设备上未显示新启动画面

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

Terminal

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

请参阅 Apple 关于测试启动屏幕的指南以获取更多信息。

应用图标

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

创建应用图标

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

将图标图片导出为 .png 格式

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

在应用配置中添加图标

打开应用配置，并将本地路径作为 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

对于 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 为不同的系统外观（例如深色和有色）指定不同的图标。如果指定了该项，将会覆盖应用配置文件中的顶级 icon 键。请参见下面的示例：

app.json

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