如何在 React Native 中设置 `ImageBackground` 图像位置。就像在 css 中的“背景位置：底部”一样？

Question

所以我在 react native 中设置背景图像，但我需要将背景图像的位置设置为底部。所以如果有人知道如何实现这一点。

我曾尝试添加 backgroundPosition 但它似乎不受支持

<ImageBackground
  source={require("../assets/img/bg-top.png")}
  // resizeMethod={'auto'}
  style={{
    width: "100%",
    height: 120,
    padding: 20,
    paddingVertical: 40,
    backgroundPosition: "bottom" // not working
  }}
  imageStyle={{
    resizeMode: "cover",
    alignSelf: "flex-end"
  }}
>
  <Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>;

我希望图像对齐应该从底部开始，而不是从顶部开始

Answer 1

ImageBackground 中的图像具有默认样式：

position: 'absolute'
top: 0
bottom: 0
right: 0
left: 0

所以，我们可以top: 0通过设置删除

top: undefined

我们在一起

<ImageBackground
  source={require("../assets/img/bg-top.png")}
  // resizeMethod={'auto'}
  style={{
    width: "100%",
    height: 120,
    padding: 20,
    paddingVertical: 40,
    overflow: 'hidden' // prevent image overflow the container
  }}
  imageStyle={{
    resizeMode: "cover",
    height: 200, // the image height
    top: undefined
  }}
>
  <Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>

Answer 2

React Native 提供了底部和位置标签以在底部设置 UI。请将 backgroundPosition 标签从图像样式替换为

位置：'绝对'，底部：0

 <ImageBackground
  // resizeMethod={'auto'}
  style={{
    width: "100%",
    height: 120,
    backgroundColor:'#000',
    padding: 20,
    paddingVertical: 40,
    position: 'absolute',
  bottom:0
  }}
  imageStyle={{
    resizeMode: "cover",
    alignSelf: "flex-end"
  }}
>
  <Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>

请检查小吃博览会

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