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

【问题标题】：React-Native-Elements card isn't showing the full ImageReact-Native-Elements 卡未显示完整图像
【发布时间】：2019-08-06 09:29:33
【问题描述】：

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

图像从顶部和底部切掉；换句话说，没有显示整个图像。另一个问题是图像与卡片重叠。基本上，图像的尖角与显示图像的卡片的圆角重叠。

这是我卡的代码：

<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% 显示的图像。

【问题讨论】：

头像风格width: "100%", height:"100%"
对不起，我写问题的方式一定令人困惑，等等。我会编辑它。问题出在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,}}

标签： image react-native react-native-elements

【解决方案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'
  }}
...
>

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

【讨论】：