圖像從帶有陰影的容器中溢出

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>;