如何修改@react-navigation/drawer中DrawerContentScrollView的内边距样式

有两种简单的方法可以去掉DrawerContentScrollView默认的顶部内边距：

方法一：直接覆盖contentContainerStyle #

自定义抽屉内容时，给DrawerContentScrollView设置contentContainerStyle属性，将paddingTop设为0：

import { DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView
      {...props}
      contentContainerStyle={{ paddingTop: 0 }}
    >
      <DrawerItemList {...props} />
      {/* 这里放你的自定义抽屉内容 */}
    </DrawerContentScrollView>
  );
}

// 在Drawer导航器中使用自定义内容
<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
  {/* 你的屏幕配置 */}
</Drawer.Navigator>

方法二：禁用顶部安全区域适配 #

如果默认的paddingTop是来自安全区域适配，可以通过safeAreaInsets属性直接取消顶部的安全区域设置：

<DrawerContentScrollView
  {...props}
  safeAreaInsets={{ top: 0 }}
>
  <DrawerItemList {...props} />
  {/* 自定义内容 */}
</DrawerContentScrollView>

这两种方法都能直接覆盖掉组件默认添加的状态栏高度内边距，适配你自定义Header后的布局需求。

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