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

Question

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

据我了解，图像组件需要 height/width 道具。但是设置它不会使其响应。我用 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-element 卡片组件的道具。

react-native-element 中有一个 image prop 可以满足所有要求。

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

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

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

Image is not showing up or covering the whole available area of the View in react-native-element card component

react-native

react-native-image

react-native-elements