调用SectionList的scrollToLocation方法后，滚动跳动

Question

我想在网上用部分列表实现类似scrollspy的功能。 我正在使用scrollToLocation方法。 问题是滚动完成后，滚动跳了起来。我认为这是由于加载先前的行引起的。我不知道为什么即使提供getItemLayout prop也会发生此问题。 这是一个基本的演示。 您可以找到完整的代码示例here。

这是我的部分列表：

 <SectionList
    style={{ backgroundColor: 'blue' }}
    renderItem={this.renderItem}
    renderSectionHeader={this.renderSectionHeader}
    sections={sections}
    keyExtractor={(item, index) => item.id}
    getItemLayout={this.getItemLayout}
    ref={me => this.sectionList = me}
    maxToRenderPerBatch={20}
  />

这是我的getItemLayout函数：

 getItemLayout = (
  data,
  index,
 ) => {
   const layoutTable = layoutTableGenerator(data, 100, 40)

   return {length: layoutTable[index].length, offset: layoutTable[index].offset, index}
  }

这是我的辅助函数，用于为getItemLayout生成数据：

 module.exports = (sections, itemHeight, sectionHeaderHeight, sectionFooterHeight = 0) => {
   return sections.reduce((layoutTable, section, sectionIndex) => {
     const layoutTableLastItem = layoutTable[layoutTable.length - 1]
     const currentSectionLayoutTable = []

     currentSectionLayoutTable.push({
       length: sectionHeaderHeight,
       offset: layoutTableLastItem ? (layoutTableLastItem.offset + layoutTableLastItem.length) : 0
     })

     for(let i = 0; i < section.data.length; i++) {
       const currentSectionLayoutTableLastItem = currentSectionLayoutTable[currentSectionLayoutTable.length - 1]

       currentSectionLayoutTable.push({
         length: itemHeight,
         offset: currentSectionLayoutTableLastItem.offset + currentSectionLayoutTableLastItem.length
       })
      }

      const currentSectionLayoutTableLastItem = currentSectionLayoutTable[currentSectionLayoutTable.length - 1]
      currentSectionLayoutTable.push({
        length: sectionFooterHeight,
        offset: currentSectionLayoutTableLastItem.offset + currentSectionLayoutTableLastItem.length
      })

     return [
       ...layoutTable,
       ...currentSectionLayoutTable
     ]
  }, [])
 }

Answer 1

这是因为SectionList具有标头，使用getItemlayout时需要考虑这些标头。 This链接详细介绍了该链接，还链接了一个npm软件包作为解决方案