使用expo-router Drawer布局时React Native安卓端顶部出现额外空白

以下是针对这个问题的几种常见解决思路：

• 统一处理状态栏适配
  使用expo-status-bar组件明确设置状态栏样式，并开启半透明，让页面内容可以延伸到状态栏下方，再手动给头部添加对应状态栏高度的内边距：

  import { StatusBar } from 'expo-status-bar';
  import { Drawer } from 'expo-router/drawer';
  
  export default function RootLayout() {
    return (
      <>
        <StatusBar style="dark" translucent={true} />
        <Drawer
          screenOptions={{
            headerStyle: {
              paddingTop: StatusBar.currentHeight || 0,
            },
          }}
        >
          {/* 你的路由页面配置 */}
        </Drawer>
      </>
    );
  }
  

• 禁用Drawer默认的头部内边距
  Expo Router的Drawer布局在安卓端可能默认添加了适配状态栏的顶部内边距，和自定义处理冲突导致空白。可以在screenOptions里禁用这个默认行为：

  <Drawer
    screenOptions={{
      headerTopInsetEnabled: false,
    }}
  >
    {/* ... */}
  </Drawer>
  

• 调整SafeAreaView的安全区域范围
  如果页面中使用了SafeAreaView，安卓端默认会包含状态栏的安全区域，可能导致头部上方多出空白。可以限制安全区域只作用于底部：

  import { SafeAreaView } from 'react-native-safe-area-context';
  
  <SafeAreaView edges={['bottom']} style={{ flex: 1 }}>
    {/* 页面内容 */}
  </SafeAreaView>
  

  或者用useSafeAreaInsets钩子手动获取状态栏高度，给头部单独设置内边距：

  import { useSafeAreaInsets } from 'react-native-safe-area-context';
  
  const CustomHeader = () => {
    const insets = useSafeAreaInsets();
    return (
      <View style={{ paddingTop: insets.top, backgroundColor: '#fff' }}>
        {/* 头部内容 */}
      </View>
    );
  };
  

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