React Native ListView sticky效果实现

xiaoxiao2021-02-27  405

项目技术点分析:

      在React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果;而使用ListView组件时,使用 stickyHeaderIndices 则不生效。

      如何实现滚动时每个section header会吸顶?

      在ListView中要实现 sticky ,需要使用 cloneWithRowsAndSections 方法,将 dataBlob(object), sectionIDs (array), rowIDs (array) 三个值传进去。

 dataBlob

 dataBlob 包含ListView所需的所有数据(section header 和 rows),在ListView渲染数据时,使用getSectionData 和 getRowData 来渲染每一行数据。 dataBlob 的 key 值包含 sectionID rowId

 sectionIDs

sectionIDs 用于标识每组section

rowIDs

rowIDs 用于描述每个 section 里的每行数据的位置及是否需要渲染。在ListView渲染时,会先遍历 rowIDs 获取到对应的 dataBlob 数据

模拟对应的数据结构

示例代码:

效果展示:

转载请注明原文地址: https://www.6miu.com/read-983.html

最新回复(0)