Question

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

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

这是我的银行卡代码：

<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'
  }}
...
>

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

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

1 个答案: