react-native - 如何根据显示尺寸对 ImageBackground 进行平方？

Question

我想将背景图像平方，例如

高度：200，宽度：200，

但我也想根据显示大小更改大小，例如：

宽度：Dimensions.get('window').width / 2.5 高度：'auto'

我怎样才能做到这一点？

将高度设置为“自动”不起作用。我也玩过 resizeMode

这是样式道具：

  backgroundImageStyle: {
    alignSelf: 'center',
    top: 100,
    resizeMode: 'stretch',
    alignItems: 'center',
    width: 200,
    height: 200,
    position: 'absolute'
  },

Answer 1

您可以使用您backgroundImageStyle的默认样式选项，但我建议使用 resizeMode “contain”。在您的渲染方法中，您可以使用以下命令覆盖您的高度/宽度：

<Image source={{YOUR_IMAGE_URI}} 
style={[styles.backgroundImageStyle, {width: Dimensions.get('window').width, height: Dimensions.get('window').width}]}
/>

工作示例：

https://snack.expo.io/S15hYZVAN

输出：

编辑：

如果您不想获得完整尺寸，可以通过将宽度除以一个因子来缩小图像，如下所示：

<Image source={{YOUR_IMAGE_URI}} 
style={[styles.backgroundImageStyle, {width: Dimensions.get('window').width/2.5, height: Dimensions.get('window').width/2.5}]}
/>