Flatlist getItemLayout 用例

Question

为什么我们在 flatlist 中使用 getItemLayout，它如何帮助提高 flatlist 的性能。检查 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是水平的，每列被视为列出一个列表行，列宽与行高相同。