セクションリストを使用して、web 上で scrollspy のようなものを実装したいと考えています。scrollToLocation メソッドを使用しています。問題は、スクロールが終了するとスクロールがジャンプすることです。前の行をロードすることが原因だと思います。getItemLayout プロップを提供している場合でも、この問題が発生する理由がわかりません。これが基本的なデモです。完全なコード例はここにあります。
これは私のセクションリストです：
<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
]
}, [])
}