Question

情况：

我有一大堆照片，我们正在将它们加载到缩略图网格中。这些缩略图是它们自己的组件，在RenderRow函数中以三个为一组加载。这是有问题的Image组件：

<Image
  style={styles.image}
  source={this.state.loaded ? { uri: image.url_small } : imagePlaceholder}
  onLoad={() => { this.setState({ loaded: true }); }}
  onLoadStart={() => { this.setState({ loaded: false }); }}
/>

问题：

我们的问题是，如果您正在快速滚动，或者互联网连接不够理想，那么一些开始加载的图像永远不会调用“onLoad”，大概是因为它们不再可见（因为我们滚动了）已超出他们的列表）。

但是，当我们回滚到这些图像时，所有渲染的都是占位符图像，并且照片的状态永远不会设置为loaded: true。我已经尝试过搞乱ListView上的onChangeVisibleRows函数了：

onChangeVisibleRows={(visibleRows) => {
  const visibleRowNumbers = [];
  for (const row in visibleRows) {
    visibleRowNumbers.push(row);
  }
  this.setState({ visibleRowNumbers });
}}

这似乎按预期工作，在RenderRow函数中，我可以检查特定行是否可见，并尝试通过将isVisible道具传递给图像组件来重新渲染该行中的图像，但是当isVisible prop更改时，当我从shouldComponentUpdate返回true时，图像组件仍未更新。

但无济于事。

我相信我走在正确的轨道上，但已经走到了尽头。 有没有人知道如何强制重新加载图像组件？或者是否有某种onLoadInterrupted可能会被添加，以便在视图中再次开始加载？< / p>

ListView中离开屏幕的图像丢失其状态（从未设置为“已加载”）

0 个答案: