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数据
模拟对应的数据结构示例代码:效果展示:
相关文章推荐
- React Native之ListView实现九宫格效果
- React-Native应用ListView实现上拉下拉刷新效果实践
- React Native之ListView实现九宫格效果
- ReactNative 中 ListView实现GridView效果
- React Native 基础 之ListView实现吸顶效果
- React Native之ListView实现九宫格效果
- ReactNative中ListView的实现效果
- ReactNative基础(四)了解ListView的使用、实现GridView效果、编写一个真实网络请求案例
- 《React-Native系列》23、 js实现下拉刷新效果(Android和iOS通用)
- React Native View 组件通过阴影渲染实现组件浮现效果
- react native listview 实现下拉刷新(RefreshControl)
- React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
- react-native ListView下拉刷新上拉加载实现代码
- [ReactNative]淘宝首页app实现原理,listView使用技巧
- React Native之Modal组件实现遮罩层效果
- 使用react-native-pull实现跨平台Android&IOS下拉刷新滑动回弹效果
- React-native IT喵~ ScrollView 嵌套ListView 如何实现上拉加载、下拉刷新
- React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现
- React-native 实现表情商城 表情长按拖动预览(还原安卓微信效果)
- React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现