0

情况：

我有很多照片，我们正在将它们加载到缩略图网格中。这些缩略图都是它们自己的组件，在 RenderRow 函数中以三个一组的形式加载。这是有问题的图像组件：

<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. 我试过onChangeVisibleRows像这样弄乱 ListView 上的函数：

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

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

但无济于事。

我相信我在正确的轨道上，但已经走到了死胡同。有谁知道我如何强制图像组件重新加载？或者是否可以添加某种内容onLoadInterrupted，以便在看到它后再次开始加载？

4

0 回答 0