仅加载 Flatlist 中的可见图像反应本机

Question

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

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

Answer 1

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

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

Answer 2

您应该能够使用平面列表上的initialNumToRender属性来执行此操作。

所以你的 flatList 声明可能是：

<FlatList
    initialNumToRender={2}
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
/>