调用SectionList的scrollToLocation方法后，scroll在跳跃

Posted 2023-02-16

【中文标题】调用SectionList的scrollToLocation方法后，scroll在跳跃

【英文标题】：After calling scrollToLocation method of SectionList, scroll is jumping

【发布时间】：2019-05-26 14:52:33

【问题描述】：

我想用部分列表在网络上实现类似 scrollspy 的东西。 我正在使用 scrollToLocation 方法。 问题是滚动完成时滚动正在跳跃。我认为它是通过加载前几行引起的。即使提供 getItemLayout 道具，我也不知道为什么会发生此问题。 这是一个基本的演示。 您可以找到完整的代码示例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
     ]
  , [])
 

【参考方案1】：

这是因为SectionList 有在使用getItemlayout 时需要考虑的标题。 This 链接详细描述了它，还链接了一个npm 包作为解决方案

【讨论】：

我在辅助函数中考虑了节标题。我也使用了那个 npm 包，但问题没有改变。