React Native应用header与手机状态栏重叠，SafeAreaView包裹未生效问题

问题复现 #

自定义react-navigation header和系统状态栏重叠，包裹页面的SafeAreaView不生效是正常情况，因为react-navigation的header默认渲染层级独立于页面内容容器，SafeAreaView仅作用于你包裹的页面内容，不会影响header的布局。

可用解决方案 #

方案1：使用react-navigation内置API适配 #

react-navigation的@react-navigation/elements包提供了useHeaderHeight钩子，内置了状态栏高度的适配逻辑，直接在自定义Header组件中使用即可：

import { useHeaderHeight } from '@react-navigation/elements';

const CustomHeader = () => {
  const headerHeight = useHeaderHeight();
  return (
    <View style={{ height: headerHeight, justifyContent: 'flex-end', paddingBottom: 8 }}>
      {/* Header内容 */}
    </View>
  )
}

你也可以直接在Stack.Screen的options中配置headerStatusBarHeight指定状态栏高度：

<Stack.Screen 
  name="YourScreen"
  component={YourScreen}
  options={{
    header: () => <CustomHeader />,
    headerStatusBarHeight: Platform.OS === 'ios' ? 47 : StatusBar.currentHeight || 0
  }}
/>

方案2：手动获取状态栏高度适配 #

如果不想依赖react-navigation的内置工具，可以手动获取边距适配：

import { Platform, StatusBar, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomHeader = () => {
  const insets = useSafeAreaInsets();
  // 分别适配iOS和安卓的状态栏高度
  const statusBarHeight = Platform.OS === 'ios' ? insets.top : StatusBar.currentHeight || 0;
  // 56是header内容区域的标准高度，可按需调整
  const totalHeaderHeight = 56 + statusBarHeight;

  return (
    <View style={{ height: totalHeaderHeight, paddingTop: statusBarHeight }}>
      {/* Header内容 */}
    </View>
  )
}

如果是全局统一使用自定义Header，可以直接在Stack.Navigator的screenOptions中统一配置适配参数，不需要每个页面单独调整。

注意事项 #

• 安卓端如果开启了StatusBar.setTranslucent(true)，必须手动配置header顶部内边距，否则一定会出现重叠
• 不要同时给页面包裹SafeAreaView和配置header的顶部边距，否则会出现双重留白
• 确保你的应用根节点已经包裹了SafeAreaProvider（来自react-native-safe-area-context），否则iOS的刘海屏/灵动岛适配会失效

内容的提问来源于stack exchange，提问作者Ahmed