React native 设置背景图像位置（即web中的“background-position-x”和“background-position-y”）

当我有背景图像时：

<Image style={{flex: 1, width: null, height: null, resizeMode: 'cover'}} source={require('../images/background.png')}>
    <!-- Children -->
</Image>

我希望我的图像覆盖整个屏幕，同时保持图像的纵横比。（请参见我使用

宽度：null，高度：null

的原因）

但是，如果图像宽度远小于高度，则图像将居中，从而修剪顶部

问题：我如何使图像从顶部开始，就像

背景位置：50%0

在网络中一样？

嘿：）尝试增加父容器的高度，即：

风格：

export default StyleSheet.create({
  image: {
    flex: 1,
    height: null,
    width: null,
  },
  imageContainer: {
    bottom: 0,
    flex: 1,
    height: '130%',
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    width: '100%',
  },
})

组成部分：

<View style={styles.imageContainer}>
        <Image
          resizeMode="cover"
          source={require('src/assets/images/background.jpg')}
          style={styles.image}
        />
      </View>

---

使用此解决方案，您可以稍微调整一下图像。

尽管图像现在不推荐用于ImageBackground，但可以将其更新为如何重新定位背景的良好示例。