React-Native-Elements卡未显示完整图像

Question

我正在尝试使用react-native-element制作一张卡片，但是我遇到了图像组件的问题。

图像从顶部和底部被切断；换句话说，整个图像不会被显示。另一个问题是图像与卡片重叠。基本上，图像的锐角与显示图像的卡片的圆角重叠。

这是我的卡的代码：

<Card
image={{uri: 'https://i2-prod.mirror.co.uk/incoming/article14334083.ece/ALTERNATES/s615/3_Beautiful-girl-with-a-gentle-smile.jpg'}}
containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}>
<View
    style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}
  >
  <View style={{ flexDirection: 'row'}}>
    <Avatar 
        size="small"
        rounded
        source={{
    uri:
      'https://i2-prod.mirror.co.uk/incoming/article14334083.ece/ALTERNATES/s615/3_Beautiful-girl-with-a-gentle-smile.jpg',
  }}
  />
    <Text>Name</Text>
    </View>
    <View>
    <Text>Date</Text>
    </View>
  </View>
    <Text>Caption of image</Text>
</Card>

问题出在

image={{uri: 'https://i2-prod.mirror.co.uk/incoming/article14334083.ece/ALTERNATES/s615/3_Beautiful-girl-with-a-gentle-smile.jpg'}}
containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}

这是与卡片边框重叠的图像，并未100%显示。

Answer 1

试着把这个道具添加到Card中

<Card
  image={{uri: 'https://i2-prod.mirror.co.uk/incoming/article14334083.ece/ALTERNATES/s615/3_Beautiful-girl-with-a-gentle-smile.jpg'}}
  imageStyle={{
    width: '200px,
    height: '200px',
   resizeMode: 'cover'
  }}
...
>

尝试指定准确的宽度和高度，请参见上面的示例。