react-native-expandable-section-list
react-native-expandable-section-list 是一个纯js编写的可伸缩列表,类似于QQ列表形式,作为ListView的简单扩展组件,能同时运行在android和iOS双平台下,
安装
npm install react-native-expandable-section-list --save
注意:
- 如你使用的版本是react-native 0.43之后,另推荐使用react-native-expandable-section-flatlist,他是类似的FlatList组件扩展的可伸缩列表
- react-native-expandable-section-list 本就是对分组列表所做的扩展,因而不建议再导入原ListView使用分组的各种属性和数据格式。
用法
数据源:
const MockData = [
...
{
header: 'sectionHeader',
member: [
...
{
title: 'memberTitle',
content: 'content',
},
...
]
},
...
]
使用:
; PureComponent <Text>rowItemtitle</Text>; <Text>section</Text>; { return <ExpanableList dataSource=MockData headerKey="title" memberKey="member" renderRow=this_renderRow renderSectionHeaderX=this_renderSection openOptions=12 /> ; }
扩展: 用法详细可参见源代码中example
属性
Prop | Default | Type | Description |
---|---|---|---|
dataSource | - | array |
指定导入的数据源,格式规范如上所述,必需属性 |
headerKey | 'header' | string |
指定数据源中组头数据的键值 |
memberKey | 'member' | string |
指定数据源中组成员数据的键值 |
renderSectionHeaderX | - | function |
每一个列表分组组头的渲染回调 |
renderRow | - | function |
列表分组中每个成员行的渲染回调 |
renderSectionFooterX | - | function |
每一个列表分组组尾的渲染回调 |
headerOnPress | - | function |
点击打开关闭列表分组组头的回调 |
isOpen | false | boolean |
默认是否打开全部分组 |
openOptions | - | array |
可选单独打开某几个分组 |
方法
setSectionState
: 改变分组状态
setSectionState(index, state)
- 'index' (number) - 设置分组状态的下标
- 'state' (bool) - 分组状态设置,
true
为open,false
为close
Licence
(MIT)