Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-native-expandable-section-list with all npm packages installed. Try it out:

var reactNativeExpandableSectionList = require("react-native-expandable-section-list")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-expandable-section-list v1.0.7

react-native-expandable-section-list is a expandable list what is similar to QQ's list of Tencent

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',
                },
            ...
            ]
        },
        ...
    ]

使用:

import ExpanableList from 'react-native-expandable-section-list';

class Example extends React.PureComponent {
  _renderRow = (rowItem, rowId, sectionId) => <Text>{rowItem.title}</Text>;
  _renderSection = (section, sectionId)  => <Text>{section}</Text>;

  render() {
    return (
      <ExpanableList
        dataSource={MockData}
        headerKey="title"
        memberKey="member"
        renderRow={this._renderRow}
        renderSectionHeaderX={this._renderSection}
        openOptions={[1,2,]}
      />
    );
  }
}

扩展: 用法详细可参见源代码中example

属性

PropDefaultTypeDescription
dataSource-array指定导入的数据源,格式规范如上所述,必需属性
headerKey'header'string指定数据源中组头数据的键值
memberKey'member'string指定数据源中组成员数据的键值
renderSectionHeaderX-function每一个列表分组组头的渲染回调
renderRow-function列表分组中每个成员行的渲染回调
renderSectionFooterX-function每一个列表分组组尾的渲染回调
headerOnPress-function点击打开关闭列表分组组头的回调
isOpenfalseboolean默认是否打开全部分组
openOptions-array可选单独打开某几个分组

方法

setSectionState: 改变分组状态

setSectionState(index, state)
  • 'index' (number) - 设置分组状态的下标
  • 'state' (bool) - 分组状态设置,true为open,false为close

Licence

(MIT)

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free