ray-rn-collapse v1.0.4

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:

Methods

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

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

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

License

MIT