Expo自定义抽屉头部组件背景图覆盖内容的问题求助

问题原因 #

你的CustomDrawerHeader组件中，背景图Image使用了absolute定位，但父组件SafeAreaView缺少两个关键设置：

• 未添加position: relative，导致absolute定位的图片以整个视口为基准，而非头部容器
• 没有高度限制，图片无垂直方向约束，会自动拉伸覆盖整个页面

修复代码 #

修改后的组件代码如下：

interface CustomDrawerHeaderProps {
  title: string;
  rightAction?: React.ReactNode;
  backRoute?: string;
}

function CustomDrawerHeader({
  title,
  rightAction,
  backRoute,
}: CustomDrawerHeaderProps): JSX.Element {
  const navigation = useNavigation();
  const router = useRouter();

  return (
    <SafeAreaView 
      edges={['top', 'left', 'right']}
      className='relative h-[60px]' {/* 设置固定高度，可根据需求调整数值 */}
    >
      <Image
        source={require('../../../assets/header-bg.png')}
        className='absolute top-0 left-0 w-full h-full'
        resizeMode="cover" {/* 保持图片比例，避免拉伸变形 */}
      />
      {/* 头部内容容器，悬浮在背景图上方 */}
      <View className='absolute inset-0 flex items-center justify-between px-4'>
        {backRoute && (
          <TouchableOpacity onPress={() => navigation.navigate(backRoute)}>
            <Text className='text-white'>返回</Text>
          </TouchableOpacity>
        )}
        <Text className='text-white font-bold text-lg'>{title}</Text>
        {rightAction}
      </View>
    </SafeAreaView>
  );
}

export { CustomDrawerHeader, SearchAction };

关键修改说明 #

• 给SafeAreaView添加relative定位，将图片的定位范围限制在头部容器内
• 给SafeAreaView设置固定高度，约束头部的垂直空间，避免背景图无限制延伸
• 调整Image的样式，让它完全铺满头部容器，同时通过resizeMode保证图片显示效果
• 添加内容容器，让标题、按钮等元素悬浮在背景图上方，不会被遮挡

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