系统栏

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

For the complete documentation index, see llms.txt. Use this file to discover all available pages.

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

这些组件用于显示设备信息，例如电池电量、时间、通知提醒，并允许用户在设备界面的任意位置直接与设备交互。例如，应用用户可以下拉状态栏来访问快捷设置和通知，而不受当前正在使用的应用影响。

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

使用安全区域处理重叠

你的应用内容有时可能会绘制到系统栏后面。为了解决这个问题，你需要通过避免重叠并确保系统栏的控件可见，来正确定位应用内容。

以下指南将带你了解如何使用 SafeAreaView 或 hook，直接为屏幕的每一边应用 inset。

Android 上的安全区域和边到边布局

在 Android 上的边到边布局 之前，通常会使用半透明的状态栏和导航栏。采用这种方式时，绘制在这些栏后面的内容实际上已经位于它们下方，因此通常不需要考虑安全区域。

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

自定义系统栏

系统栏可以自定义，以匹配你的应用设计，并在不同场景下提供更好的可见性。在使用 Expo 时，可使用两个库来实现这一点：expo-status-bar 和 expo-navigation-bar（仅 Android）。

状态栏配置

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

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

export default function RootLayout() {
  return (
    <>
      {/* 在状态栏中使用浅色文字而不是深色文字，以便在深色背景下提供更高的对比度。 */}
      <StatusBar style="light" />
    </>
  );
}

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

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

导航栏配置（仅 Android）

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

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

export default function RootLayout() {
  return (
    <>
      {/* 设置导航栏样式 */}
      <NavigationBar style="dark" />
    </>
  );
}

要控制 NavigationBar 的可见性，你可以使用 hidden 属性或 NavigationBar.setHidden 方法。