reactjs - 图像从带有阴影的容器中溢出

Question

我正在尝试为我的 RN 应用程序创建自定义卡片视图，现在我正在处理卡片的封面图像，但似乎图像容器溢出了主容器，这似乎是由与框阴影冲突引起的（在这里，我删除了我的样式）。

这是我的卡片组件的代码

export const LocationCard: React.FC<Props> = ({
  name,
  imageURI,
  description,
}) => {
  return (
    <View style={styles.card}>
      <View style={styles.imagecontainer}>
        <Image
          source={{ uri: imageURI }}
          style={{ width:"100%",height:"100%", borderRadius: 25, flexWrap:"wrap"}}
          resizeMode="cover"
        />
      </View>
      <View style={styles.content}>
        <Text>{name}</Text>
        <Text>{description}</Text>
      </View>
    </View>
  );
};

这是一张对比图

Answer 1

您可以使用 => 溢出：'隐藏'

<View style={[styles.imagecontainer, {overflow: 'hidden'}]}>
  <Image
    source={{uri: imageURI}}
    style={{width: '100%', height: '100%', borderRadius: 25, flexWrap: 'wrap'}}
    resizeMode="cover"
  />
</View>;