Flatlist getItemLayout用例 [英] Flatlist getItemLayout usecase

问题描述

为什么我们在Flatlist中使用getItemLayout，如何帮助改善Flatlist的性能?请检查本机文档，但找不到满意的答案.

Why we use getItemLayout in flatlist ,how it help to improve performance of a flatlist .check the react-native docs but didn't find a satisfying answer.

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

这里有什么偏移，它有什么作用?

what is offset here ,what it does?

推荐答案

React Native FlatList通过仅呈现当前在屏幕上可见的行并卸载已滚动过去的行来优化列表视图性能.

React Native FlatList optimises list view performance by only rendering rows that are currently visible on the screen, and unmounting rows that have been scrolled past.

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

In order for FlatList to be able to do this, it needs to know the total height of the rows above the currently visible viewport, so it can set the underlying ScrollView scroll position correctly.

FlatList有两种方法可以实现此目的.要么

There are two ways for FlatList to achieve this. Either,

• 它可以在安装行之后计算行的高度，或者
• 您可以告诉它您期望行的高度.

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

In the former case, it needs to to fully layout, render, mount and measure the previous rows need until it is able to calculate the position of the next rows.

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

In the latter, it can precalculate the positions ahead of time and avoid the dynamic measurement cost.

getItemLayout 回调的三个参数是:

• length :每行的高度.它们可以具有不同的高度，但是高度应该是静态的.当高度恒定时，优化效果最佳.
• offset :当前行距FlatList顶部的距离(以像素为单位).对于高度恒定的行，最简单的计算方法是 height * index ，它会在上一行之后立即得出位置.
• index :当前行的索引.

• length: Height of each individual row. They can be of different heights, but the height should be static. The optimizations work best when the height is constant.
• offset: The distance (in pixels) of the current row from the top of the FlatList. The easiest way to calculate this for constant height rows is height * index, which yields the position immediately after the previous row.
• index: The current row index.

如果FlatList是水平的，则将每一列视为列表行，并且列宽与行高相同.

If the FlatList is horizontal, the each column is treated list a list row, and the column width is the same as row height.

这篇关于Flatlist getItemLayout用例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！