ray-rn-swipe-view

author

ilex.h

install

``bash
$ npm install --save ray-rn-swipe-view
`

Usage

$3

`js
import SwipeView from 'ray-rn-swipe-view';

const NativeButton = NativeButton;
const SwipeoutButton = SwipeViewBtn;

// Buttons
var swipeviewBtns = [
{
text: 'Button'
}
]

// Swipeout component


Swipe me left



`

$3

`js
import SwipeView from 'ray-rn-swipe-view';
import { AppColors } from './styles/colors';

const NativeButton = NativeButton;
const SwipeoutButton = SwipeViewBtn;

// Buttons
const btnsDefault = [{ text: 'Button' }];

const btnsTypes = [
{ text: 'Primary', type: 'primary' },
{ text: 'Secondary', type: 'secondary' },
{ text: 'Delete', type: 'delete' }
];

const rows = [
{ text: '基础使用', right: btnsDefault },
{
text: '按钮事件',
right: [
{
text: '点击试试',
onPress(){ alert('button pressed'); },
type: 'primary'
}
]
},
{ text: '按钮 types', right: btnsTypes },
{ text: '自定义按钮样式',
right: [
{
text: 'Button',
backgroundColor: AppColors.buttonGreen,
color: AppColors.snow,
underlayColor: AppColors.bloodOrange
}
]
},
{
text: '自定义滑动超出部分颜色',
right: btnsDefault,
backgroundColor: AppColors.bloodOrange
},
{
text: 'SwipeView autoClose={true}',
right: btnsDefault,
autoClose: true
},
{
text: 'Five buttons (full-width) + autoClose={true}',
right: [
{ text: '按钮1' },
{ text: '按钮2' },
{ text: '按钮3' },
{ text: '按钮4' },
{ text: '按钮5' }
],
autoClose: true
},
{
text: '自定义Button',
right: [
{
component:
}
]
},
{ text: 'Swipe me right (buttons on left side)', left: btnsDefault},
{ text: 'Buttons on both sides', left: btnsTypes, right: btnsTypes }
];

constructor() {
super();

// datasource rerendered when change is made (used to set swipeout to active)
var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => true });

this.state = {
dataSource: ds.cloneWithRows(rows),
sectionID: null,
rowID: null
};
}

_renderRow = (rowData, sectionID, rowID) => {
return (
close={!(this.state.sectionID === sectionID && this.state.rowID === rowID)}
left={rowData.left}
right={rowData.right}
rowID={rowID}
sectionID={sectionID}
autoClose={rowData.autoClose}
backgroundColor={rowData.backgroundColor}
onOpen={(sectionID, rowID) => {
this.setState({
sectionID,
rowID
});
}}
onClose={() => console.log('close')}
scroll={event => console.log('scroll event')}
>
console.log('press item')}>

{rowData.text}



);
}

// Swipeout component
scrollEnabled
dataSource={this.state.dataSource}
renderRow={this._renderRow}
style={styles.listview}
/>

`

Props

Prop | Type | Default | Description
--------------- | ------ | --------- | -----------
autoClose | bool | false | auto close on button press
backgroundColor | string | '#dbddde' |
close | bool | | close swipeview
disabled | bool | false | whether to disable the swipeview
left | array | [] | swipeview buttons on left
onOpen | func | | (sectionID, rowId, direction: string) => void
onClose | func | | (sectionID, rowId, direction: string) => void
right | array | [] | swipeview buttons on right
scroll | func | | prevent parent scroll
style | style | | style of the container
sensitivity | number | 50 | change the sensitivity of gesture
buttonWidth | number | | each button width

##### SwipeView Button props

Prop | Type | Default | Description
--------------- | ------ | --------- | -----------
backgroundColor | string | '#b6bec0' | background color
color | string | '#ffffff' | 按钮内容颜色
component | Node or element | null | 按钮自定义内容
onPress | func | null | 按钮按下事件
text | string | 'Click'| 按钮内容
type | string | 'default' | 可取的值:default, delete, primary, secondary`
underlayColor | string | null | 按下按钮的颜色
disabled | bool | false | 禁用