为什么我们在平面列表中使用getItemLayout,它如何帮助提高平面列表的性能.查看react native docs,但没有找到令人满意的答案.
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
这里的偏移量是什么,它的作用是什么?
为什么我们在平面列表中使用getItemLayout,它如何帮助提高平面列表的性能.查看react native docs,但没有找到令人满意的答案.
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
这里的偏移量是什么,它的作用是什么?
React Native FlatList通过仅渲染屏幕上当前可见的行,并卸载已滚动过go 的行,优化列表视图性能.
为了让FlatList能够做到这一点,它需要知道当前可见视口上方行的总高度,这样才能正确设置底层ScrollView滚动位置.
FlatList有两种方法可以实现这一点.任何一个
在前一种情况下,它需要完全布局、渲染、装载和测量前一行所需的内容,直到能够计算出下一行的位置.
在后者中,它可以提前计算位置,避免动态测量成本.
getItemLayout
回调的三个参数是:
length
:每行的高度.它们可以有不同的高度,但高度应该是静态的.当高度恒定时,优化效果最佳. offset
:当前行距平面列表顶部的距离(以像素为单位).对于恒定高度的行,计算该值的最简单方法是height * index
,这会产生紧跟在前一行之后的位置.index
:当前行索引.如果FlatList是水平的,则每列都被视为列表行,列宽与行高相同.