8

即使我可以更改屏幕方向以更新状态并重新渲染，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",
4

3 回答 3

5

您需要使用resizeforresizeMethod以使图像获得实际调整大小：

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 方向改变

于 2020-10-27T14:21:17.440 回答
0

您可以仅使用 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 版本中，您可以查看该问题
  • 如果您仍然需要使用指定宽度和高度this.state.width并this.state.height考虑使用usewindowdimensions它更合适，因为它会自动更新。
于 2020-10-20T10:34:34.703 回答
0

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

于 2020-10-22T00:18:34.107 回答