您的位置:首页 > Web前端 > React

React Native ListView sticky效果实现

2017-05-04 00:51 821 查看
项目技术点分析:      在React Native中,ScrollView组件可以使用 
stickyHeaderIndices 
轻松实现 
sticky 
效果;而使用ListView组件时,使用 
stickyHeaderIndices 
则不生效。      如何实现滚动时每个sectionheader会吸顶?      在ListView中要实现 
sticky 
,需要使用 
cloneWithRowsAndSections 
方法,将 
dataBlob
(object), 
sectionIDs 
(array), 
rowIDs 
(array)三个值传进去。 dataBlob 
dataBlob 
包含ListView所需的所有数据(sectionheader 和 rows),在ListView渲染数据时,使用
getSectionData 
和 
getRowData 
来渲染每一行数据。 
dataBlob 
的 
key 
值包含 
sectionID 
rowId

 sectionIDs

sectionIDs 
用于标识每组section

rowIDs

rowIDs 
用于描述每个 
section 
里的每行数据的位置及是否需要渲染。在ListView渲染时,会先遍历 
rowIDs 
获取到对应的 
dataBlob 
数据
模拟对应的数据结构
示例代码:效果展示:

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: