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 通过仅渲染当前在屏幕上可见的行并卸载已经滚动过去的行来优化列表视图性能。

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

FlatList 有两种实现方式。或者，

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

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

后者可以提前预算位置，避免动态测量成本。

getItemLayout 回调的三个参数是：

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

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

Answer 2

尽管@jevakallio 的对垂直平面列表很好，但我在实现水平平面列表时遇到了一些边距方面的困难，所以我正在为实现类似事情的人写这个答案

水平扁平化列表的答案

我在水平平面列表中实现了一个日历，我想在它首次呈现时显示当前日期（因为这样用户就不必在每次使用日历时都滚动）

这里的每一天（item）都是 60px 宽 70px 高，我还给了一个 10px 的 horizontalMargin

item:{
  width: 60px,
  height: 70px,
  horizontalMargin: 10px
}

这是你应该在 getItemLayout

中做的

用宽换长属性
你还应该添加边距，因为它是 horizontal flatlist

      <FlatList
        data={daysOfThisMonth}
        horizontal
        showsHorizontalScrollIndicator={false}
        renderItem={({ item, index }) => (
          <RenderItemDays
            item={item}
            index={index}
            dayIndex={dayIndex}
            setDayIndex={setDayIndex}
          />
        )}
        initialScrollIndex={new Date().getDate() - 1} 
        getItemLayout={(_, index) => ({
          length: 60 + 20, //  WIDTH + (MARGIN_HORIZONTAL * 2)
          offset: (60 + 20) * (index),  //  ( WIDTH + (MARGIN_HORIZONTAL*2) ) * (index)
          index,
        })}
      />

如果你不明白我上面的回答HERE可以看更详细的解释

Flatlist getItemLayout 用例

Flatlist getItemLayout usecase

android

performance

react-native

react-native-flatlist

水平扁平化列表的答案