配置状态栏、启动屏幕和应用图标

配置状态栏

¥Configure the status bar

expo-status-bar 库预装在使用 create-expo-app 创建的每个项目中。此库提供了一个 StatusBar 组件来配置应用的状态栏样式。

¥expo-status-bar library comes pre-installed in every project created using create-expo-app. This library provides a StatusBar component to configure the app's status bar style.

在 app/_layout.tsx 中：

¥Inside app/_layout.tsx:

1. 从 expo-status-bar 导入 StatusBar。

   ¥Import StatusBar from expo-status-bar.

2. 将 StatusBar 和现有的 Stack 组件与 React 的 Fragment 组件 分组。

   ¥Group the StatusBar and existing Stack components with React's Fragment component.

import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';

export default function RootLayout() {
return (
  <>
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="+not-found" />
    </Stack>
    <StatusBar style="light" />
  </>
);
}

让我们看看我们现在在 Android 和 iOS 上的应用：

¥Let's take a look at our app now on Android, and iOS:

应用图标

¥App icon

在项目中，assets/images 目录中有一个 icon.png 文件。这是我们的应用图标。这是一个 1024 像素 x 1024 像素的图片，如下所示：

¥Inside the project, there's an icon.png file inside the assets/images directory. This is our app icon. It's a 1024px by 1024px image and looks as shown below:

与启动画面图片一样，app.json 文件中的 "icon" 属性配置应用图标的路径。默认情况下，新的 Expo 项目定义了 "./assets/images/icon.png" 的正确路径。我们不必改变任何东西。

¥Like the splash screen image, the "icon" property in the app.json file configures the app icon's path. By default, a new Expo project defines the correct path to "./assets/images/icon.png". We don't have to change anything.

最终，当你为应用商店构建应用时，Expo 应用服务（EAS） 将获取此图片并为每个设备创建优化的图标。

¥Eventually, when you'll build your app for the app stores, Expo Application Services (EAS) will take this image and create optimized icon for every device.

你可以在 Expo Go 的不同位置看到该图标。以下是 Expo Go 开发者菜单中显示的应用图标的示例：

¥You can see the icon in various places in Expo Go. Here is an example of the app icon displayed in the developer menu of Expo Go:

启动画面

¥Splash screen

在加载应用内容之前，启动画面可见。它使用较小的图片，例如居中显示的应用图标。一旦应用的内容准备好显示，它就会隐藏。

¥A splash screen is visible before the app's content is loaded. It uses a smaller image, such as an app's icon, which is centered. It hides once the app's content is ready to be displayed.

expo-splash-screen 插件已预安装在使用 create-expo-app 创建的每个项目中。此库提供了一个配置插件来配置启动画面。

¥The expo-splash-screen plugin already comes pre-installed in every project created using create-expo-app. This library provides a config plugin to configure the splash screen.

在 app.json 中，expo-splash-screen 插件已配置为使用应用的图标作为启动画面图片（在 可下载资源 中提供），代码片段如下，因此我们无需更改任何内容：

¥In app.json, the expo-splash-screen plugin is already configured to use the app's icon as the splash screen image (provided in the downloadable assets) with the following snippet so we don't have to change anything:

{
"plugins": [
  %%placeholder-start%%... %%placeholder-end%%
  [
    "expo-splash-screen",
    {
      "image": "./assets/images/splash-icon.png"
      %%placeholder-start%%... %%placeholder-end%%
    }
  ]
]
}

但是，要测试启动画面，我们不能使用 Expo Go 或 开发构建。要测试它，我们需要创建应用的预览版或生产版本。我们建议通过以下资源了解有关启动画面配置及其测试方法的更多信息：

¥However, to test the splash screen, we cannot use Expo Go or a development build. To test it, we need to create a preview or a production build of our app. We recommend going through the following resources to learn more about the splash screen configuration and how to test it:

• 创建启动画面图标 指南，了解如何配置启动画面图标。

  ¥Create a splash screen icon guide to learn how splash screen icon is configured.

• 要了解如何创建预览版本，请参阅 EAS 教程中的 内部分发 指南，或要创建生产版本，请参阅 安卓 和 iOS 系统 的指南。

  ¥To learn how to create a preview build, see Internal distribution guide in EAS Tutorial, or to create production builds see guides for Android and iOS.