为什么我们在平面列表中使用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是水平的,则每列都被视为列表行,列宽与行高相同.

React-native相关问答推荐

React Native在同一页面上使用多个不同的导航器

嵌套的FlatList内的Incorrect Padding

导航堆栈不显示

我们应该在 react-native 移动应用程序中使用哪个图标库

如何在 React Navigation 5 中将父函数传递给子屏幕?

react-native react-native-vector-icons:如何使用字体真棒图标

使用 AsyncStorage 如何以及在何处保存整个 redux 存储

使用 react-native 单击时如何更改图像和文本 colored颜色 ?

如何在 React Native For Android 中删除启动画面后的白屏

React-Native:显示加载屏幕直到加载 webview

xcrun:错误:SDK "iphoneos" cannot be located

在整个屏幕上获取touch 事件

Test suite无法运行 TypeError:Cannot read property ‘default’ of undefined

通过带有对象子对象的数组react native 映射 - 与react网络中的工作方式不同?

React-native Xcode 构建失败 -> 'RCTAssert.h file not found'

如何在本地构建 Expo APK

如何在 React Native 中等待 Alert 对话框的响应?

React Native,AppStore 请求 NSLocationAlwaysUsageDescription 值

从标题中的按钮导航到不同的屏幕

如何升级 react-native gradle 版本