如何在本机反应中设置“ImageBackground”图像位置。就像在 css `background-postion: bottom` 中一样？答案

【问题标题】：How to set `ImageBackground` image position in react native. Like in css `background-postion: bottom`?如何在本机反应中设置“ImageBackground”图像位置。就像在 css `background-postion: bottom` 中一样？
【发布时间】：2019-04-14 08:17:52
【问题描述】：

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

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

【问题讨论】：

标签： react-native

【解决方案1】：

React Native 提供了 bottom 和 position 标签来设置 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

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案3】：

docs 不支持您从 CSS 中获知的 backgroundPosition。

有一个类似的问题：

https://stackoverflow.com/a/53726116/9899193

这对你有帮助吗？

【讨论】：

【解决方案4】：

为了实现背景图片的位置我使用如下代码，实际上我使用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%',
  },

终于实现了我的愿望：

注意： 上面的代码是行不通的，只是伪代码来表达我的确切想法。

【讨论】：