系统栏

了解如何在你的 Expo 项目中处理和自定义系统栏，以实现安全区域和无边框布局。

系统栏是位于屏幕边缘的 UI 元素，提供必要的设备信息和导航控件。根据移动操作系统的不同，它们包括状态栏（安卓 和 iOS 系统）、标题栏（仅限 安卓）、导航栏（安卓 和 iOS 系统）以及主页指示器（仅限 iOS）。

¥System bars are the UI elements at the edges of the screen that provide essential device information and navigation controls. Depending on the mobile OS, they include the status bar (Android and iOS), caption bar (Android only), navigation bar (Android and iOS), and home indicator (iOS only).

这些组件用于显示设备信息，例如电池电量、时间、通知提醒，并提供从设备界面任何位置与设备的直接交互。例如，无论应用用户当前正在使用哪个应用，都可以下拉状态栏来访问快速设置和通知。

¥These components are used to display device information such as battery level, time, notification alerts, and provide direct interaction with the device from anywhere in the device's interface. For example, an app user can pull down the status bar to access quick settings and notifications regardless of which app they're currently using.

系统栏是移动体验的基础，了解如何正确使用它们对于创建你的应用至关重要。

¥System bars are fundamental to the mobile experience, and understanding how to work with them properly is important for creating your app.

使用安全区域处理重叠

¥Handling overlaps using safe areas

你的部分应用内容可能会绘制在系统栏后面。为此，你需要正确定位应用内容，避免重叠并确保系统栏中的控件可见。

¥Some of your app's content may draw behind the system bars. To handle this, you need to position your app's content correctly by avoiding the overlap and ensuring that the controls from the system bars are present.

以下指南将引导你了解如何使用 SafeAreaView 或钩子直接在屏幕的每个边缘应用内嵌图 (Insets)。

¥The following guide walks you through how to use SafeAreaView or a hook to apply insets directly for each edge of the screen.

Android 上的安全区域和无边框布局

¥Safe areas and edge-to-edge layout on Android

在 Android 上的边到边 之前，半透明的状态栏和导航栏很常见。采用这种方法，这些状态栏后面绘制的内容已经位于其下方，通常无需考虑安全区域。

¥Before edge-to-edge on Android, it was common to have a translucent status bar and navigation bar. With this approach, the content drawn behind these bars was already underneath them, and it was typically not necessary to factor in safe areas.

现在，Android 上的边到边，你需要使用安全区域来确保内容不会与系统栏重叠。

¥Now, with edge-to-edge on Android, you will need to use safe areas to ensure that content does not overlap with system bars.

自定义系统栏

¥Customizing system bars

系统栏可以自定义，以匹配你的应用设计，并在不同场景下提供更好的可视性。使用 Expo 时，有两个库可用于此操作：expo-status-bar 和 expo-navigation-bar（仅限 Android）。

¥System bars can be customized to match your app's design and provide better visibility in different scenarios. When using Expo, there are two libraries available for this: expo-status-bar and expo-navigation-bar (Android only).

状态栏配置

¥Status bar configuration

状态栏显示在 Android 和 iOS 屏幕的顶部。你可以使用 expo-status-bar 对其进行自定义。它提供了一个 StatusBar 组件，你可以使用该组件的 style 属性或 setStatusBarStyle 方法在应用运行时控制状态栏的外观：

¥The status bar appears at the top of the screen on both Android and iOS. You can customize it using expo-status-bar. It provides a StatusBar component that you can use to control the appearance of the status bar while your app is running using the style property or the setStatusBarStyle method:

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

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

注意：在 Expo 默认模板中，style 属性设置为 auto。它会根据你应用当前使用的配色方案（亮色或暗色模式）自动选择合适的样式。

¥Note: In Expo default template, the style property is set to auto. It automatically picks the appropriate style depending on the color scheme (light or dark mode) currently used by your app.

要控制 StatusBar 的可见性，可以将 hidden 属性设置为 true 或使用 setStatusBarHidden 方法。

¥To control the StatusBar visibility, you can set the hidden property to true or use the setStatusBarHidden method.

在 Android 上启用无边框屏幕后，expo-status-bar 中依赖于不透明状态栏 不可用 的功能将无法使用。只能自定义样式和可见性。其他属性将不执行任何操作并发出警告。

¥With edge-to-edge enabled on Android, features from expo-status-bar that depend on an opaque status bar are unavailable. It's only possible to customize the style and visibility. Other properties will no-op and warn.

导航栏配置（仅限 Android）

¥Navigation bar configuration (Android only)

在 Android 设备上，导航栏会显示在屏幕底部。你可以使用 expo-navigation-bar 库对其进行自定义。它提供了一个 NavigationBar 组件，你可以使用该组件的 setStyle 方法设置导航栏的样式：

¥On Android devices, the Navigation Bar appears at the bottom of the screen. You can customize it using the expo-navigation-bar library. It provides a NavigationBar component that you can use to set the style of the navigation bar using the setStyle method:

import { NavigationBar } from 'expo-navigation-bar';
import { useEffect } from 'react';

useEffect(() => {
  if (Platform.OS === 'android') {
    // Set the navigation bar style
    NavigationBar.setStyle('dark');
  }
}, []);

要控制 NavigationBar 的可见性，可以使用 setVisibilityAsync 方法。

¥To control the NavigationBar visibility, you can use the setVisibilityAsync method.

在 Android 上启用无边框屏幕后，expo-navigation-bar 中依赖于不透明导航栏 不可用 的功能将无法使用。只能自定义样式和可见性。其他属性将不执行任何操作并发出警告。

¥With edge-to-edge enabled on Android, features from expo-navigation-bar that depend on an opaque navigation bar are unavailable. It's only possible to customize the style and visibility. Other properties will no-op and warn.