反应本机 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

您可以仅使用 CSS 自动指定宽度和高度，这将确保您的视图为每个 size/layout.

占用完整的 width/height

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

注意事项：

你的 RN 版本中可能仍然存在 react native 中的错误你可以查看 issue
如果您仍然需要使用 this.state.width 和 this.state.height 指定宽度和高度，请考虑使用 usewindowdimensions 它更合适，因为它会自动更新。

Answer 2

我刚刚运行遇到了类似的问题。我发现的一种解决方法是在每次方向更改时生成一个唯一 ID (UUID)，并将该 UUID 用作 ImageBackground 的键。这将重新安装图像并解决该错误。

Answer 3

您需要对 resizeMethod 使用 resize 才能使图像实际调整大小：

resizeMethod

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

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 scale when 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) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly 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

反应本机 ImageBackground 方向更改

React Native ImageBackground Orientation Change

react-native

screen-orientation

imagebackground

结果屏幕截图：

测试环境：

博览会小吃：