仅在 Flatlist 中加载可见图像答案

【问题标题】：Load only visible images in Flatlist react native仅在 Flatlist 中加载可见图像
【发布时间】：2017-11-10 08:56:45
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-native-android react-native-flatlist

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您应该可以使用平面列表中的initialNumToRender 属性来执行此操作。

所以你的 flatList 声明可能是：

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

【讨论】：

【解决方案3】：

您可以使用下面的Flatlist 仅加载当前视口中的那些图像。

             <FlatList
                    ref={(view) => (this.parentScrollView = view)}
                    data={this.state.data}
                    onScroll={this.handleScroll}
                    keyExtractor={keyExtractor}
                    showsVerticalScrollIndicator={false}
                    bounces={false}
                    numColumns={3}
                    renderItem={this.renderItem}
                    ItemSeparatorComponent={this.ItemSeparatorComponent}
                    ListEmptyComponent={this.ListEmptyComponent}

                    //code for optimization and load only visible items
                    initialNumToRender={8}
                    maxToRenderPerBatch={2}
                    onEndReachedThreshold={0.1}
                    onMomentumScrollBegin={this.onMomentumScrollBegin}
                    onEndReached={this.onEndReached}
           />

我的onEndReached 是：

onEndReached = () => {
        console.log('end reached');
        if (!this.onEndReachedCalledDuringMomentum) {
            console.log('loading more archived products');
            this.loadMoreProducts();                
            this.onEndReachedCalledDuringMomentum = true;
        }
    }

而onMomentumScrollBegin 是：

onMomentumScrollBegin = () => { this.onEndReachedCalledDuringMomentum = false; }

initialNumToRender 将安装前 8 个项目并且永远不会删除它们，除非 Flatlist 本身没有被卸载。在快速滚动列表的同时保持列表滚动性能很有帮助。

onMomentumScrollBegin 和onEndReachedThreshold 用于何时为列表加载更多元素。这可能是 API 调用等。

【讨论】：