如何在React Native中设置`ImageBackground`图像位置。就像在CSS`background-postion:bottom`中一样?

时间:2019-04-14 08:17:52

标签: react-native

所以我要在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>;

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

4 个答案:

答案 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>

请检查小吃博览会

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

答案 2 :(得分:0)

根据{{​​3}},不支持您从CSS知道的

backgroundPosition。

还有一个类似的问题:

docs

这对您有帮助吗?

答案 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%',
  },

最后,我达到了我的愿望:

enter image description here

注意: 上面的代码不可行,它只是伪代码,无法传达我的确切想法。