系统栏

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

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

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

系统栏是移动体验的基础，正确理解如何与它们协作对于开发你的应用程序非常重要。

使用安全区域处理重叠

您的应用部分内容可能会绘制在系统栏后面。为了解决这个问题，您需要正确定位应用内容，避免重叠，并确保系统栏中的控件可见。

以下指南将带您了解如何使用 SafeAreaView 或钩子为屏幕的每个边缘直接应用内边距。

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() {
  <>
    {/* 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 方法。

在 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') {
    // Set the navigation bar style
    NavigationBar.setStyle('dark');
  }
}, []);

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

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