react-native - 仅在 Flatlist 中加载可见图像 react 原生

Question

我使用 Flatlist 制作了一个图像网格。我正在从网络加载图像。目前，只要我导航到该特定页面，就会加载所有图像。我想要的只是加载那些在屏幕上可见并停留在滚动条上的图像。屏幕上同时显示六幅图像。

是否可以在 Flatlist 中的滚动上加载图像？

Answer 1

你需要组合的属性其实是initialNumToRender和 windowSize .如果您只想一次显示一屏图像，您可以使用 windowSize={1} .我个人建议您至少使用 windowSize={3} 以便您可以渲染上一个和下一个屏幕，但这实际上取决于您显示的图像的大小。
还要注意用 initialNumToRender 指定的项目永远不会被删除。这是为了允许“转到顶部”功能。您可能想要也可能不想要这些元素。

还需要注意的是，您可能需要对这些图像实现某种缓存。一旦您“取消渲染”它们并且您需要再次渲染它们，就会为它们发出一个新请求，从而导致用户设备上使用更多带宽。