Question

我正在实施SectionList，显示需要滚动到当前周的周数列表，因此我使用的是initialScrollIndex。

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

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

_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
  };
}

Answer 1

很长一段时间，但未来的读者想要分享一些信息。

有一篇很好的文章解释了getItemLayout，请找到here

我还面临data[index] undefined。原因是index是根据section.data.length + 2计算的（1表示节标题，1表示节页脚），您可以找到代码here (RN-52)。

使用SectionList时，我们在处理index时必须非常小心。

Answer 2

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

将这两个方法中的任何一个都链接到SectionList的getItemLayout参数会针对要呈现的每个项目在数据上重新执行相同的迭代。这样做所增加的开销是巨大的，并且在对其进行校正之后，可以显着提高性能。

基本上，关键是要在提供给组件的数据改变其形状时计算偏移量数据，然后调用该计算出的数据来获取getItemLayout的偏移量。这样一来，每次数据更改都会产生一次迭代，而与列表的每次交互都会导致无尽的迭代。

Answer 3

由于某些原因，react-native-get-item-layout包始终与"height: <<NaN>>"一起崩溃，因此我不得不编写own RN SectionList getItemLayout。它使用与前者相同的接口。像package一样，它也是O(n)。

React Native getItemLayout

3 个答案: