反应本机 getItemLayout [英] React Native getItemLayout

问题描述

我正在实现一个 SectionList 显示需要滚动到当前周的周列表，因此我使用了 initialScrollIndex.

I am implementing a SectionList showing a list of weeks which needs to scroll to the current week, thus I am using initialScrollIndex.

我面临的问题是我真的不明白给我的 _getItemLayout 的索引是什么?有时data[index] === undefined，这对我来说没有意义.

The problem I face is that I don't really understand what the index given to my _getItemLayout is? Sometimes data[index] === undefined, which doesn't make sense to me.

我需要知道它是哪个部分 (data[?]) 因为每个部分都包含另一个 SectionList 用于该周的事件，因此高度不是常数.

I need to know which section it is (data[?]) as each section contains another SectionList for the events that week, thus height isn't a constant.

_getItemLayout = (data, index) => {
  const rows = (data[index] === undefined) ? 1 : data[index].data.reduce((sum, value) => value.data.length + sum, 0);
  const height = (rows * 94);
  return {
    length: height,
    offset: height * index,
    index
  };
}

推荐答案

与 uxxi 类似，我们最终基于 react-native-get-item-layout 编写了我们自己的实现，但有一个重要的区别.

Similar to uxxi we ended up writing up our own implementation based off of react-native-get-item-layout but there is an important distinction to make.

将任一方法连接到 SectionList getItemLayout 参数都会为正在呈现的每个项目重新执行对数据的相同迭代.由此增加的开销是巨大的，在对其进行更正后，性能有了显着的提升.

Wiring either method to the SectionList getItemLayout parameter re-executes the same iterations over the data for every item being rendered. The overhead added by this is substantial and after correcting for the same there is a significant performance improvement.

本质上，关键是在提供给组件的数据改变其形状时计算偏移数据，然后调用该计算数据以获得 getItemLayout 的偏移.这将导致每次数据更改进行一次迭代，而每次与列表交互时都会进行无休止的迭代.

Essentially the key is to calculate your offset data whenever the data provided to the component changes it's shape and then call against that calculated data to obtain the offset for getItemLayout. This will result in a single iteration per data change vs endless iterations per interaction with the list.

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