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

配置状态栏

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

在 app/_layout.tsx 中：

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

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 x 1024px 的图像，外观如下：

与启动屏幕图像一样，app.json 文件中的 "icon" 属性配置了应用图标的路径。默认情况下，新的 Expo 项目定义了正确的路径为 "./assets/images/icon.png"。我们不需要更改任何内容。

最终，当您为应用商店构建应用时，Expo 应用服务 (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 的指南。