ray-rn-collapse
v1.0.4
Published
collapse react-native component
Downloads
15
Readme
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