1

我正在尝试使用 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% 显示。

4

1 回答 1

0

尝试将此道具添加到您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'
  }}
...
>

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

于 2019-08-06T11:16:43.230 回答