React Native ListView sticky效果实现

• Z时代
• 2024-01-10
• 分类：综合

项目技术点分析：

      在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 数据

模拟对应的数据结构


示例代码：

效果展示：

以上是 React Native ListView sticky效果实现 的全部内容， 来源链接： utcz.com/z/381663.html