React Native ListView sticky效果实现

项目技术点分析:

      在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

React Native ListView sticky效果实现

 sectionIDs

sectionIDs 用于标识每组section

React Native ListView sticky效果实现


rowIDs

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

React Native ListView sticky效果实现

模拟对应的数据结构

React Native ListView sticky效果实现

示例代码:

React Native ListView sticky效果实现React Native ListView sticky效果实现React Native ListView sticky效果实现



效果展示:

React Native ListView sticky效果实现