系统栏

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

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

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

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

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

使用安全区域处理重叠

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

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

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

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

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

自定义系统栏

系统栏可以自定义，以匹配你的应用设计，并在不同场景下提供更好的可见性。在使用 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() {
  <>
    {/* 在状态栏中使用浅色文本而不是深色文本，以便在深色背景上提供更高的对比度。 */}
    <StatusBar style="light" />
  </>;
}

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

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

在 Android 上启用 edge-to-edge 后，依赖不透明状态栏的 expo-status-bar 功能将 不可用。此时只能自定义样式和可见性。其他属性将不会生效并会发出警告。

导航栏配置（仅 Android）

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

import { Platform } from 'react-native';
import * as NavigationBar from 'expo-navigation-bar';
import { useEffect } from 'react';

useEffect(() => {
  if (Platform.OS === 'android') {
    // 设置导航栏样式
    NavigationBar.setStyle('dark');
  }
}, []);

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

在 Android 上启用 edge-to-edge 后，依赖不透明导航栏的 expo-navigation-bar 功能将 不可用。此时只能自定义样式和可见性。其他属性将不会生效并会发出警告。