系统栏

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

系统栏是位于屏幕边缘的用户界面元素，用于提供设备的基本信息和导航控制。根据移动操作系统的不同，它们包括状态栏（Android 和 iOS）、标题栏（仅限 Android）、导航栏（Android 和 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 或钩子直接为屏幕的每个边缘应用内边距。

🌐 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

在 edge-to-edge on 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。它会根据你的应用当前使用的配色方案（浅色模式或夜间模式）自动选择合适的样式。

要控制 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 功能不可用。只能自定义样式和可见性。其他属性将无效并发出警告。

导航栏配置（仅限 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 { Platform } from 'react-native';
import * as 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 功能将不可用。只能自定义样式和可见性。其他属性将无效并发出警告。