Question

我想从react-native-elements设置一张卡片，其中包含一张图片和卡片标题。我希望图像占据视图中可用的整个宽度，并调整高度以保持纵横比。所以基本上我既没有身高，也没有宽度。

据我了解，图像组件需要高度/宽度道具。但是设置它不会使它响应。我在用flex尝试了几件事，但是没用

<Card>
 <Image
    style={{
    flex: 1,
    alignSelf: 'stretch',
    width: null,
    height: null
  }}
    resizeMode="contain"
    source={{
    uri: "url-of-the-image.png"
  }}/>
  <View>
    <Text>Image Title</Text>
  </View>
</Card>

图片未显示

Answer 1

您有两个选择：要么使用使用resizeMode =“ cover”而不是View标签的ImageBackground标签要么在图像标签内使用resizeMode =“ cover”。

这应该可以解决您的问题。

Answer 2

尝试了一些事情后，看来我错过了反应本机卡片组件的道具。

react-native元素中有一个图像道具，可以完成所有需要的工作。

对于可能会觉得有用的人来说，这就是我最终所做的

<Card image={{uri: "url-of-the-image.png"}}>
  <View>
    <Text style={styles.tag}>{tags}</Text>
    <Text style={styles.title}>{title}</Text>
  </View>
</Card>

图像未显示或覆盖视图中的本机元素组件的整个可用区域

2 个答案: