React 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

当图像的大小调整时应该使用的机制 尺寸与图像视图的尺寸不同。默认为 auto.

• auto：使用启发式方法在resize 和scale 之间进行选择。

• resize：一种软件操作，可在解码之前更改内存中的编码图像。这应该用来代替scale 当图像比视图大得多时。

• scale: 图像被缩小或放大。与resize 相比，scale 更快（通常是硬件加速）并且 产生更高质量的图像。如果图像是，这应该使用 比视图小。如果图像是，也应该使用它 比视图略大。

很明显，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

Answer 2

您可以仅使用 CSS 自动指定宽度和高度，这将确保您的视图采用每个尺寸/布局的完整宽度/高度。

     <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>

注意事项：

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

Answer 3

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