image - React Native：底部对齐源高度高于容器的图像

Question

我希望能够使用 Image 或 ImageBackground 对图像进行底部对齐，但这样做没有成功。

<View style={styles.moduleHeader}>
  <ImageBackground
     style={styles.image}
     source={{ uri: image }}
     resizeMode="cover">
     <Text>text</Text>
  </ImageBackground>
</View> 

moduleHeader: {
  height: 200,
},

image: {
  width: Layout.viewport.width, //device width
  height: 200,
  position: "absolute",
  bottom: 0,
},

其他尝试包括负上边距和填充。

我也弄乱了纵横比，但这需要更精确的数字，我不需要那种精确度。

绝对和底部的包含没有任何效果，我可以告诉...基本上我想模仿background-position: center bottom;CSS 中的效果。
我不介意图像是否水平裁剪，只是图像底部与容器底部对齐。

我无法确定这在 React-Native 中是否可行，因此确认该理论将构成正确答案。

一如既往地非常感谢任何和所有方向，所以提前致谢！

Answer 1

您需要从 ImageBackground 样式中删除位置和底部标签并添加到 View 样式中

像这样的东西

moduleHeader: {
  height: 200,
  width:'100%',
  position: "absolute",
  bottom: 0,
},

image: {
  width:'100%', //device width
  height: 200,
  backgroundColor:"#000",
},

请检查此小吃博览会代码

https://snack.expo.io/@vishal7008/again-bottom-ui