android - Flatlist getItemLayout 用例

Question

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

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

什么是offset，它有什么作用？

Answer 1

React Native FlatList 通过仅渲染当前在屏幕上可见的行并卸载已经滚动过去的行来优化 ListView 性能。

为了让 FlatList 能够做到这一点，它需要知道当前可见视口(viewport)上方行的总高度，以便它可以正确设置底层 ScrollView 滚动位置。

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

• 它可以在行被安装后计算行的高度，或者
• 您可以告诉它您希望行的高度。

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

后者可以提前预计算位置，避免动态测量开销。

getItemLayout 回调的三个参数是:

• length:每一行的高度。它们可以有不同的高度，但高度应该是静态的。当高度恒定时，优化效果最好。
• offset:当前行距 FlatList 顶部的距离(以像素为单位)。为恒定高度行计算此值的最简单方法是 height * index，它会生成紧跟在前一行之后的位置。
• index:当前行索引。

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