启动画面和应用图标

创建启动画面

¥Create a splash screen

要创建启动图片，你可以使用此 Figma 模板。它为 Android 和 iOS 的图标和启动图片提供了最低限度的设计。

¥To create a splash image, you can use this Figma template. It provides a bare minimum design for an icon and splash images for Android and iOS.

有关详细演练，请观看下面的视频：

¥For an in-detail walkthrough, see the video below:

将启动图片导出为 .png

¥Export the splash image as a .png

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

¥After creating a splash screen, export it as a .png and save it in the assets/images directory. By default, Expo uses splash.png as the file name. If you decide to change the name of your splash screen file, make sure to use that in the next step.

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

¥Note: Currently, only .png images are supported to use as a splash screen in an Expo project. If you use another image format, making a production build of your app will fail.

在应用配置中添加启动画面

¥Add the splash screen in app config

打开应用配置并添加本地路径作为 splash.image 属性的值，以指向你的新启动图片。

¥Open the app config and add the local path as the value of splash.image property to point to your new splash image.

{
  "splash": {
    "image": "./assets/images/splash.png"
  }
}

你可以通过使用 npx expo start 启动开发服务器并使用开发版本或 Expo Go 进行预览来测试新的启动画面。

¥You can test your new splash image by starting the development server with npx expo start and using a development build or Expo Go to preview it.

注意：在开发模式下，当你测试新的启动画面时，你会注意到屏幕底部有一个信息栏。它显示有关在准备应用时在设备上下载了多少 JavaScript 代码的信息。它不会出现在生产应用中。

¥Note: In development mode, when you test your new splash screen, you will notice an information bar at the bottom of the screen. It displays the information about how much of the JavaScript code is downloaded on the device when preparing your app. It doesn't appear in production apps.

更改背景颜色

¥Change the background color

如果你为初始图片设置白色以外的背景颜色，你可能会在其周围看到白色边框。这是由于 splash.backgroundColor 属性的默认值为 #ffffff。

¥If you set a background color other than white for your splash image, you may see a white border around it. This is due to the splash.backgroundColor property that has a default value of #ffffff.

你可以更新此属性的值以匹配启动画面的背景颜色。例如：

¥You can update this property's value to match your splash image's background color. For example:

{
  "splash": {
    "image": "./assets/images/splash.png",
    "backgroundColor": "#FEF9B0"
  }
}

调整启动画面大小（可选）

¥Resize a splash screen (optional)

你提供的任何启动图片都会调整大小以保持其纵横比并适合用户设备的解析。

¥Any splash image you provide gets resized to maintain its aspect ratio and fit the resolution of the user's device.

你可以使用两个属性来调整大小：contain（默认）和 cover。这些属性的工作方式类似于 React Native <Image> 中的 resizeMode，如下所示：

¥You can use two properties for resizing: contain (default) and cover. These properties work similar to the resizeMode in React Native <Image>, as demonstrated below:

将其应用于示例：

¥Applying this to an example:

{
  "splash": {
    "image": "./assets/images/splash.png",
    "resizeMode": "cover"
    "backgroundColor": "#FFFFFF"
  }
}

在上面的示例中，图片被拉伸以填充整个宽度，同时保持纵横比。这就是为什么当 resizeMode 设置为 contain 时，启动图片上的徽标会变大的原因。

¥In the above example, the image is stretched to fill the entire width while maintaining the aspect ratio. This is why the logo on the splash image is larger when resizeMode is set to contain.

要了解有关 contain 和 cover 之间的区别的更多信息，请参阅 此链接。

创建应用图标

¥Create an app icon

要创建应用图标，你可以使用此 Figma 模板。它为 Android 和 iOS 的图标和启动图片提供了最低限度的设计。

¥To create an app icon, you can use this Figma template. It provides a bare minimum design for an icon and splash images for Android and iOS.

有关详细演练，请观看下面的视频：

¥For an in-detail walkthrough, see the video below:

将图标图片导出为 .png

¥Export the icon image as a .png

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

¥After creating an app icon, export it as .png and save it in the assets/images directory. By default, Expo uses icon.png as the file name. If you decide to use its file name, make sure to use that in the next step.

在应用配置中添加图标

¥Add the icon in app config

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

¥Open the app config and add the local path as the value of icon property to point it to your new app icon:

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