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

【问题标题】：React Native: bottom align an image with source height taller than containerReact Native：底部对齐源高度高于容器的图像
【发布时间】：2019-04-15 00:27:41
【问题描述】：

我希望能够使用 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 中是否可行，因此确认该理论将构成正确答案。

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

【问题讨论】：

标签： image react-native imagebackground

【解决方案1】：

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

像这样的

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

【讨论】：

感谢您的回答，但不幸的是，问题不在于图像在其容器中的位置，而在于其对齐方式。基本上，如果图像源是纵向并且容器是横向的，则图像的下半部分会被裁剪。在网络中，您只需对齐背景图像，它将裁剪上半部分，在 RN 中我还没有找到它的等价物。