React Native -- 高性能列表组件

本章源码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所有的属性和方法，另外它还有三个自己的属性：

1. bounceFirstRowOnMount: bool 是一个bool属性，默认是YES，表示第一次是否先滑一下FlatList的Item

2.maxSwipeDistance: number 或者 func， 必须要赋值，表示向左滑动的最大距离

3.renderQuickActions：func，必须要赋值，表示滑动显示的内容

使用方法参照 本章Demo

SectionList

---

之前 facebook 发布了高性能的列表组件Flatlist(可理解为优化后的Listview),后来又增加了一个SectionList。属于增强版的Flatlist,支持头部悬浮等,如果你的列表不需要分组(section),那么可以使用结构更简单的<FlatList>。