Flatlist getItemLayout用例

Question

为什么我们在flatlist中使用getItemLayout，它如何帮助提高平板列表的性能。检查react-native文档，但没有找到令人满意的答案。

  getItemLayout={(data, index) => (
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
  )}

这里有什么抵消，它做什么？

Answer 1

React Native FlatList通过仅渲染当前在屏幕上可见的行并卸载已滚过的行来优化列表视图性能。

为了使FlatList能够执行此操作，它需要知道当前可见视口上方行的总高度，因此它可以正确设置基础ScrollView滚动位置。

FlatList有两种实现方法。要么，

• 它可以在安装行之后计算行的高度，或
• 你可以告诉它你对行的期望有多高。

在前一种情况下，它需要完全布局，渲染，装载和测量前面的行，直到它能够计算下一行的位置。

在后者中，它可以提前预先计算位置并避免动态测量成本。

getItemLayout回调的三个参数是：

• length：每一行的高度。它们可以具有不同的高度，但高度应该是静态的。当高度恒定时，优化效果最佳。
• offset：从FlatList顶部开始的当前行的距离（以像素为单位）。对于恒定高度行计算此值的最简单方法是height * index，它会产生紧接在前一行之后的位置。
• index：当前行索引。

如果FlatList是水平的，则每个列都被列为列表行，列宽与行高相同。