react-native - 图像未显示或覆盖 react-native-element 卡片组件中视图的整个可用区域

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" 的 ImageBackground 标签而不是 View 标签，要么在图像标签内使用 resizeMode="cover"。

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

Answer 2

在尝试了一些东西之后，似乎我错过了 react-native-element Card 组件的道具。

react-native-element 中有一个 image 道具，它可以满足所有需要。

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

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