如何在 React Native 中设置 `ImageBackground` 图像位置.就像在 css 中的“背景位置:底部"一样? [英] How to set `ImageBackground` image position in react native. Like in css `background-postion: bottom`?
问题描述
所以我在 react native 中设置背景图片,但我需要将背景图片的位置设置为底部.所以如果有人知道如何实现这一点.
So I'm setting a background image in react native but I need the position of the background image to be set to bottom. So if anyone knows how to achieve this.
我已经尝试添加 backgroundPosition 但它似乎不受支持
I have tried adding backgroundPosition but it seems it is not supported
<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>;
我希望图像对齐应该从底部开始,而不是从顶部开始
I expect the image alignment should start from the bottom rather it starts from the top
推荐答案
React native 提供了 bottom 和 position 标签来设置 UI 在底部.请将图片样式中的 backgroundPosition 标签替换为
React native provided bottom and position tag to set UI at bottom. Please replace backgroundPosition tag from image style into
位置:'绝对',底部: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
这篇关于如何在 React Native 中设置 `ImageBackground` 图像位置.就像在 css 中的“背景位置:底部"一样?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!