react-native-expandable-section-list is a expandable list what is similar to QQ's list of Tencent
npm install react-native-expandable-section-listreact-native-expandable-section-list
================================================
react-native-expandable-section-list 是一个纯js编写的可伸缩列表,类似于QQ列表形式,作为ListView的简单扩展组件,能同时运行在android和iOS双平台下,

安装
----------------------------------------------
``bash`
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',
},
...
]
},
...
]
使用:
`javascript
import ExpanableList from 'react-native-expandable-section-list';
class Example extends React.PureComponent {
_renderRow = (rowItem, rowId, sectionId) =>
_renderSection = (section, sectionId) =>
render() {
return (
headerKey="title"
memberKey="member"
renderRow={this._renderRow}
renderSectionHeaderX={this._renderSection}
openOptions={[1,2,]}
/>
);
}
}
`
扩展: 用法详细可参见源代码中example
属性
-------------------------------------------
| Prop | Default | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| dataSource | - | array | 指定导入的数据源,格式规范如上所述,必需属性 |string
| headerKey | 'header' | | 指定数据源中组头数据的键值 |string
| memberKey | 'member' | | 指定数据源中组成员数据的键值 |function
| renderSectionHeaderX | - | | 每一个列表分组组头的渲染回调 |function
| renderRow | - | | 列表分组中每个成员行的渲染回调 |function
| renderSectionFooterX | - | | 每一个列表分组组尾的渲染回调 |function
| headerOnPress | - | | 点击打开关闭列表分组组头的回调 |boolean
| isOpen | false | | 默认是否打开全部分组 |array
| openOptions | - | | 可选单独打开某几个分组 |
方法
-------------------------------------------
setSectionState: 改变分组状态
``
setSectionState(index, state)
* 'index' (number) - 设置分组状态的下标
* 'state' (bool) - 分组状态设置,true为open,false`为close
Licence
-------------------------------------------
(MIT)