ray-rn-collapse

author

ilex.h

Install

npm i --save ray-rn-collapse

Usage

basic

import React, { Component } from 'react';
import Collapse from 'ray-rn-collapse';

// easing: linear、easeInQuad、easeOutQuad、easeInOutQuad、easeInCubic、easeOutCubic...

const datas = [ 0, 1, 2, 3, 4, 5 ];

class BasicDemo extends Component {

  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      dataSource: ds.cloneWithRows(datas)
    };
  }

  _renderRow() {
    const header = (
      <View style={...}>
        <Text>展开</Text>
      </View>
    );

    const content = (
      <View style={...}>
        <Text>内容区域</Text>
      </View>
    );

    return (
      <Collapse
        header={header}
        content={content}
        easing="easeInOutQuad"
      />
    );
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
      />
    );
  }
}

Props

The following props can be used to modify the Accordion's style and/or behaviour:

Prop	Type	Opt/Required	Default	Note
activeOpacity	number	可选	1	active透明度 TouchableHighlight.
animationDuration	number	可选	300	动画持续时间
content	`node	element`	可选	-
contentWrapperStyle	object	可选	-	面板内容外层view样式
emptyContent	`node	element!string`	可选	Empty content
easing	string	可选	linear	缓动函数.
expanded	boolean	可选	false	是否展开（初始时默认展开则设置为true）
disabled	boolean	可选	false	禁用展开
showPressAnim	boolean	可选	true	点击展开时是否显示视觉反馈
header	`node	element`	必填	-
onPress	function	可选	-	press事件.
underlayColor	string	可选	#000	按下颜色 TouchableHighlight.
style	object	可选	{}	The styles you want to set on the accordion element.

Methods

The following methods can be used to open and close the collapse panel:

Method	Parameters	Note
open	-	Open the collapse.
close	-	Close the collapse.
toggle	-	Toggle the collapse.

<Collapse
  ref={coll => this.coll = coll}
  header={header}
  content={content}
  easing="easeInOutQuad"
/>

this.coll.open();
this.coll.close();
this.coll.toggle();

License

MIT