配置状态栏、启动画面和应用图标

配置状态栏

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

在 app/_layout.tsx 中：

1. 从 expo-status-bar 导入 StatusBar。
2. 使用 React 的 Fragment 组件 将 StatusBar 和现有的 Stack 组件分组。

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>
      <StatusBar style="light" />
    </>
  );
}

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

应用图标

在项目中，assets/images 目录下有一个 icon.png 文件。这就是我们的应用图标。它是一张 1024px × 1024px 的图片，外观如下：

和启动画面图片一样，app.json 文件中的 "icon" 属性用于配置应用图标的路径。默认情况下，新 Expo 项目已经将其设置为正确的 "./assets/images/icon.png" 路径。我们不需要做任何更改。

最终，当你为应用商店构建应用时，Expo Application Services (EAS) 会使用这张图片并为每种设备创建经过优化的图标。

你可以在 Expo Go 的多个位置看到这个图标。下面是一个在 Expo Go 的开发者菜单中显示应用图标的示例：

启动画面

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

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

在 app.json 中，expo-splash-screen 插件已经配置为使用应用图标作为启动画面图片（该图片来自可下载资源），使用下面的代码片段，因此我们不需要做任何更改：

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

不过，要测试启动画面，我们不能使用 Expo Go 或 开发构建。要进行测试，我们需要为应用创建预览构建或生产构建。我们建议你查看以下资源，以进一步了解启动画面的配置以及如何测试它：

• 创建启动画面图标 指南，了解启动画面图标是如何配置的。
• 若要了解如何创建预览构建，请参阅 EAS 教程中的 内部分发 指南；若要创建生产构建，请参阅 Android 和 iOS 指南。