react-native - 响应 native ImageBackground 方向更改

Question

即使我可以更改屏幕方向以更新状态并重新渲染，ImageBackground 组件仍然不会更新其宽度。
我有以下代码:

<View
  onLayout={event => this.mylayoutchange(event)}
  style={{ flex: 1, backgroundColor: 'green' }}
>
  <ImageBackground
    style={{ flex: 1, width: this.state.width, height: this.state.height }}
    imageStyle={{ resizeMode: 'repeat' }}
    source={require('../assets/images/my_background.jpg')}
  >
    <View>
      <Text>.... Other code here....</Text>
    </View>
  </ImageBackground>
</View>;

当用户改变设备的方向时， mylayoutchange() 函数被调用。它正确更新状态。渲染函数将更新。宽度和高度已正确更改，如 console.log() 中所示.然而，无论出于何种原因， <ImageBackground>不会更新其正确的宽度和高度。
当屏幕旋转时，背景图像不再填满屏幕的整个尺寸，而是看到绿色背景颜色。
我究竟做错了什么？
我的环境:

"react": "16.13.1",
"react-native": "0.63.2",

Answer 1

您需要使用 resize为 resizeMethod为了使图像获得实际调整大小:

resizeMethod

The mechanism that should be used to resize the image when the image'sdimensions differ from the image view's dimensions. Defaults toauto.

• auto: Use heuristics to pick between resize and scale.

• resize: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of scalewhen the image is much larger than the view.

• scale: The image gets drawn downscaled or upscaled. Compared to resize, scale is faster (usually hardware accelerated) andproduces higher quality images. This should be used if the image issmaller than the view. It should also be used if the image isslightly bigger than the view.

很明显，RN 选择了 scale在您的情况下，因此您必须明确将其设置为 resize当方向改变和 flex 样式改变开始时，它才能工作:

return (
  <View
    style={{ flex: 1, backgroundColor: 'blue' }}
  >
    <ImageBackground
      // All props other than children, style, imageStyle, imageRef,
      // will be passed to the inner Image component,
      // so, we can use resizeMethod that will be passed to the Image component

      resizeMethod="resize"

      style={{
        flex: 1,
        borderWidth: 1,
        borderColor: 'red'
      }}
      imageStyle={{
        resizeMode: 'repeat',
      }}
      source={require('../assets/images/my_background.jpg')}
    >
      <View>
        <Text style={{
          backgroundColor: 'white'
        }}>.... Other code here....</Text>
      </View>
      <View style={{
        position: 'absolute',
        right: 0,
        bottom: 0
      }}>
        <Text style={{
          backgroundColor: 'white'
        }}>Absolute bottom-right text</Text>
      </View>
    </ImageBackground>
  </View>
);

结果屏幕截图:

环境测试:

"react": "16.13.1",
"react-native": "0.63.2",

用于重复背景的示例图块图像(400 X 400 像素):

世博小吃:
RN ImageBackground Orientation Change