如何在React Native中使用Nativewind实现图片全屏覆盖？

直接修改组件代码，调整样式即可实现图片全屏覆盖，同时保证文本能正常显示在图片上方：

const AnnouncementsCard = ({title, content, imageSrc}) => {
  return (
    // 父容器改为占满可用空间，开启相对定位让文本可以叠加在图片上
    <View className="bg-white flex-1 relative rounded-lg">
      // 图片设置为宽高100%，用object-cover保证按比例覆盖全屏，避免拉伸变形
      <Image 
        className="h-full w-full object-cover" 
        source={{uri: imageSrc}}
      />
      // 标题放在顶部，添加半透明背景提升可读性
      <Text className="absolute top-0 left-0 right-0 p-2 text-xl font-bold text-white bg-black/30">
        {title}
      </Text>
      // 内容放在底部，同样添加半透明背景
      <Text className="absolute bottom-0 left-0 right-0 p-2 text-lg font-light text-white bg-black/30">
        {content}
      </Text>
    </View>
  );
};

关键修改点说明： #

• 父容器：移除m-2、p-2避免留白，添加flex-1让组件占满父级可用空间，relative用于让文本绝对定位在图片上方。
• 图片：删除固定宽高h-48 w-48和多余的flex布局样式，改用h-full w-full占满容器，object-cover保证图片按比例填充，不会出现拉伸变形。
• 文本：添加absolute脱离文档流，通过top-0/bottom-0固定位置，同时添加半透明背景色和白色文字，确保在图片上清晰可见。

如果不需要圆角，可以去掉父容器的rounded-lg；如果希望图片强制填满整个容器（不保留比例），可以把object-cover换成object-fill。

内容的提问来源于stack exchange，提问作者Ege Aktaş