react-native - 设置背景图片位置(即 web 中的 `background-position-x` 和 `background-position-y`)

Question

当我有背景图片时:

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

我希望我的图像覆盖整个屏幕，同时保持图像的纵横比。 (请参阅此 SO question 为什么我使用 width: null, height: null 。)

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

问题:如何让图像从顶部开始，很像 background-position: 50% 0会在网络上吗？

Answer 1

嘿:) 尝试增加父容器的高度，即:

款式:

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>

使用此解决方案，您可以稍微操纵您的图像。