所以我要在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>;
我希望图像对齐应该从底部开始,而不是从顶部开始
答案 0 :(得分:3)
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>
答案 1 :(得分:1)
React native提供的底部和 position 标签将用户界面设置在底部。请将背景样式中的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>
请检查小吃博览会
答案 2 :(得分:0)
答案 3 :(得分:0)
为了实现背景图像的位置,我使用以下代码,实际上我使用ImageBackground
组件作为整个屏幕的包装:
<ImageBackground
style={styles.screenWrapper}
imageStyle={styles.backgroundStyle}
source={{ uri: movieDetail?.image?.medium?.url }}
>
// children
~~~
const styles = createStyle({
screenWrapper: {
flex: 1,
position: 'relative',
},
backgroundStyle: {
resizeMode: 'cover',
position: 'absolute',
top: 0,
bottom: '45%',
},
最后,我达到了我的愿望:
注意: 上面的代码不可行,它只是伪代码,无法传达我的确切想法。