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

配置状态栏

¥Configure the status bar

expo-status-bar 库预安装在使用 create-expo-app 创建的每个项目中。该库提供了一个 <StatusBar> 组件，允许配置应用的状态栏以更改文本颜色、背景颜色、使其半透明等。

¥The expo-status-bar library comes pre-installed in every project created using create-expo-app. This library provides a <StatusBar> component that allows configuring the app's status bar to change the text color, background color, make it translucent, and so on.

<StatusBar> 组件已导入到 App.js 中：

¥The <StatusBar> component is already imported in the App.js:

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

它也安装在 <App> 组件中。

¥It's also mounted in the <App> component.

<StatusBar style="auto" />

目前，style 值为 auto。这意味着状态栏将根据应用的配色方案自动选择文本颜色。但是，我们在教程应用中没有不同的配色方案。只有一种活动配色方案，具有深色背景。要使状态栏亮起，请将 style 值更改为 light。

¥Currently, the style value is auto. It means that the status bar will automatically pick the text color based on the app's color scheme. However, we do not have different color schemes in the tutorial app. There is only one active color scheme, which has a dark background. To make the status bar light, change the style value to light.

<StatusBar style="light" />

启动画面

¥Splash screen

启动屏幕是在应用内容有机会加载之前可见的屏幕。一旦应用可供使用且内容可供显示，它就会隐藏。

¥A splash screen is a screen that is visible before the contents of the app has had a chance to load. It hides once the app is ready for use and the content is ready to be displayed.

通过在 app.json file.conf 文件中定义 "splash.image" 属性的路径来配置启动屏幕。它的当前值为 "./assets/splash.png" 路径。创建新的 Expo 项目时，默认情况下已完成此操作。

¥The splash screen is configured by defining a path to the "splash.image" property in the app.json file. It has a current value of "./assets/splash.png" path. This is already done by default when a new Expo project is created.

我们已经在 asset 目录中拥有 splash.png。其外观如下图所示：

¥We already have splash.png in the assets directory. It looks as shown below:

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

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

import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();
setTimeout(SplashScreen.hideAsync, 5000);

请注意，在上面的演示中，Android 设备的边缘有一个白条。根据设备的解析，它可能不可见。为了解决这个问题，我们需要为启动画面设置 backgroundColor。背景颜色应用于未被初始图片覆盖的任何屏幕区域。

¥Notice that there is a white bar on the edges of the Android device in the above demo. Depending on the resolution of the device, it might not be visible. To resolve this, we need to set the backgroundColor for the splash screen. The background color is applied to any screen area that isn't covered by the splash image.

配置启动画面背景颜色

¥Configure the splash screen background color

我们可以在 app.json 文件中配置启动屏幕的背景颜色。打开它并在 "splash" 中进行以下更改：

¥We can configure the splash screen's background color in app.json file. Open it and make the following change in "splash":

{
  "splash": {
    "image": "./assets/splash.png",
    "resizeMode": "contain",
    "backgroundColor": "#25292e"
  }
}

上述代码片段中的 backgroundColor 值与启动屏幕图片的背景相匹配。

¥The backgroundColor value in the above snippet matches the background of the splash screen image.

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

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

应用图标

¥App icon

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

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

与启动屏幕图片类似，该图标是通过在 app.json 文件中定义 "icon" 属性的路径来配置的。它的当前值为 "./assets/icon.png"，因此我们无需更改任何内容。

¥Similar to splash screen image, the icon is configured by defining a path to the "icon" property in the app.json file. It has a current value of "./assets/icon.png", so we don't have to change anything.

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

¥Eventually, when you build the 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: