本章源码FasterListDemo,包括
-
FlatList高性能的简单列表组件 -
SwipeableFlatList侧滑显示菜单组件,0.5版本之后新增 -
SectionList需要分组显示功能的话用这个
如果之前没搭建过 RN 的开发环境可以先看这里
FlatList
高性能的简单列表组件，支持下面这些常用的功能：
- 完全跨平台。
- 支持水平布局模式。
- 行组件显示或隐藏时可配置回调事件。
- 支持单独的头部组件。
- 支持单独的尾部组件。
- 支持自定义行间分隔线。
- 支持下拉刷新。
- 支持上拉加载。
- 支持跳转到指定行（ScrollToIndex）。
如果需要分组/类/区（section），请使用<SectionList>。
一个最简单的例子：
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
具体的使用和属性参照 Demo 和 FlatList文档 吧，不做重复介绍
SwipeableFlatList
React-Native 0.50+ 新添加SwipeableFlatList组件，是在FlatList基础上添加了侧滑显示菜单的功能，类似于侧滑删除效果。
它有FlatList所有的属性和方法，另外它还有三个自己的属性：
-
bounceFirstRowOnMount: bool是一个bool属性，默认是YES，表示第一次是否先滑一下FlatList的Item
2.maxSwipeDistance: number 或者 func， 必须要赋值，表示向左滑动的最大距离
3.renderQuickActions：func，必须要赋值，表示滑动显示的内容
使用方法参照 本章Demo
SectionList
之前 facebook 发布了高性能的列表组件Flatlist(可理解为优化后的Listview),后来又增加了一个SectionList。属于增强版的Flatlist,支持头部悬浮等,如果你的列表不需要分组(section),那么可以使用结构更简单的<FlatList>。
