配置状态栏

了解如何使用 expo-status-bar 库配置状态栏。

状态栏是一个小细节，但它可以使用户对应用的整体感觉和改进程度产生很大影响。当白色背景上出现白色状态栏时，你就知道有些事情不太对劲。

¥The status bar is a small detail that can make a big difference in the overall feel and perceived level of polish of your app by users. When you have a white status bar on the white background, you know something isn't going quite right.

本指南提供了为 Android 和 iOS 应用配置状态栏的工具。

¥This guide provides the tools to configure the status bar for your Android and iOS apps.

请注意第二张图片中状态栏文本和背景之间的对比度有多差。这是你要尽力避免的。

¥Notice how bad the contrast is between the status bar text and the background in the second image. This is what you want to try to avoid.

在应用加载时配置状态栏（仅限 Android）

¥Configure the status bar while app is loading (Android only)

此类配置目前仅适用于 Android。在 iOS 上，Expo Go 应用无法在应用加载之前自定义状态栏，同时渲染启动屏幕。

¥This type of configuration is currently only available on Android. On iOS, it is impossible in the Expo Go app to customize the status bar before the app has loaded, while the splash screen is presented.

在 Android 上，当启动屏幕可见时可以通过 应用配置 中的 androidStatusBar 对象配置状态栏。可用的选项与 expo-status-bar 提供的类似。

¥Configuring the status bar while the splash screen is visible on Android is available through the androidStatusBar object in the app config. The options available are similar to those provided by expo-status-bar.

Update the status bar while app is running

The StatusBar component provided by expo-status-bar allows you to control the appearance of the status bar while your app is running. expo-status-bar also provides imperative methods such as setStatusBarStyle(style) to control the style through function calls rather than the StatusBar component, if you find that to be helpful for your use case.

To fix the contrast issue from the screenshot at the top of this guide, we could use the following code:

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

export default function Playlists() {
  return (
    <>
      {%%placeholder-start%%...%%placeholder-end%%} {}
      {/* Use light text instead of dark text in the status bar to provide more contrast with a dark background. */}
      <StatusBar style="light" />
    </>
  );
}

主题和状态栏样式

¥Themes and status bar styles

如果你使用 expo-status-bar 来控制状态栏样式，style="auto" 配置将根据应用当前使用的配色方案自动选择适当的默认样式（这是默认行为，如果你完全省略 style 属性，则将使用 auto ）。请注意，如果你为用户提供一种在颜色方案之间切换的方法而不是使用操作系统主题，则这将不会产生预期的行为，并且你应该根据所选的颜色方案根据需要使用 style="light" 和 style="dark"。

¥If you use expo-status-bar to control your status bar style, the style="auto" configuration will automatically pick the appropriate default style depending on the color scheme currently used by the app (this is the default behavior if you leave out the style prop entirely then auto will be used). Note that if you provide a way for users to toggle between color schemes rather than using the operating system theme, this will not have the intended behavior, and you should use style="light" and style="dark" as needed depending on the selected color scheme.

使用你的布局渲染状态栏

¥Render the status bar in with your layout

当你有半透明状态栏时，请务必记住可以在其下方渲染内容。

¥When you have a translucent status bar, it's important to remember that content can be rendered underneath it.

当像 React 导航 这样的库提供的 UI 与状态栏重叠时，它们会为你处理这个问题。你可能会遇到需要手动调整布局以防止某些内容（例如文本）在其下方渲染的情况。为此，建议使用 react-native-safe-area-context 查找安全区域插图，并相应地向布局添加填充或边距。

¥Libraries like React Navigation will handle this for you when the UI they provide overlaps with the status bar. You are likely to encounter cases where you will need to manually adjust your layout to prevent some content (such as text) from being rendered underneath it. To do this, it is recommended to use react-native-safe-area-context to find the safe area insets and add padding or margins to your layout accordingly.

与行为不当的第三方库合作

¥Work with misbehaving third-party Libraries

使用 Expo 工具初始化的项目在 Android 上默认状态栏为 translucent。这与 iOS 一致，更符合 Material Design。不幸的是，有些库不支持 translucent 状态栏。这通常是不好的做法，应该修复这些库。但是，如果你必须使用其中之一，可以使用一些选项来适应它们的限制：

¥Projects initialized with Expo tools make the status bar translucent by default on Android. This is consistent with iOS and more in line with material design. Unfortunately, some libraries don't support translucent status bars. This is generally bad practice and those libraries should be fixed. However, if you must use one of them, there are some options available for you to accommodate their limitations:

不透明的彩色背景

¥Opaque-colored background

仅将 backgroundColor 设置为不透明颜色将禁用状态栏的 transparency，但保留 translucency。如果你希望应用的状态栏占用设备屏幕上的空间，则需要明确将 translucent 设置为 false。如果你的状态栏颜色永远不需要更改，这是一个不错的选择，例如：

¥Setting solely backgroundColor to an opaque color will disable the transparency of the status bar, however, preserve translucency. You need to explicitly set translucent to false if you want your app's status bar to take up space on the device's screen. This is a good option if your status bar color never needs to change, for example:

{
  "expo": {
    "androidStatusBar": {
      "backgroundColor": "#C2185B",
      "translucent": false
    }
  }
}

空 View

¥Empty View

你可以在屏幕顶部放置一个带有背景颜色的空 View 作为状态栏或设置顶部填充。你可以使用 react-native-safe-area-context 提供的顶部插入值来获取状态栏的高度（以及凹口，如果有的话）。

¥You can place an empty View on top of your screen with a background color to act as a status bar or set the top padding. You can get the height of the status bar (and notch, if there is one) by using the top inset value provided by react-native-safe-area-context.