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

React Native：将源高度比容器高的图像底部对齐

1 个答案: