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是水平的,则处理每列列表列表行,列宽度与行高相同.

Answer 2

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

水平平面列表的答案

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

这里每天（项目）的宽度为 60 像素，高度为 70 像素，而且我还给出了 10 像素的水平边距

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

这是你应该在你的getItemLayout

1. 使用宽度作为长度属性
2. 你还应该添加边距，因为它是horizontal平面列表

      <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,
        })}
      />

如果您不明白我上面的答案，您可以在这里查看更详细的解释