Swipeout侧滑操作

Swipeout 侧滑操作

概述

1.0开始加入

Swipeout是一个仿iOS样式的侧滑操作组件

代码演示

基本用法

import React from 'react';
import { View } from 'react-native';
import { Swipeout } from 'tuya-panel-kit';

export default class SwipeoutDemo extends React.PureComponent {
render() {
const rightBtn = [{
text: '删除',
onPress: () => this.delete(),
type: 'delete',
textStyle: { color: '#fff', fontSize: 16 }
}];
return (
<View style={styles.wrapper}>
<Swipeout autoClose right={rightBtn}>
<View style={styles.content} />
</Swipout>
</View>
)
}
}

与FlatList配合

import React from 'react';
import { View, Text, FlatList } from 'react-native';
import { Swipeout } from 'tuya-panel-kit';

export default class SwipeoutDemo extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
dataSource: [{
key: 1,
title: 'first',
rowOpen: false
}, {
key: 2,
title: 'second',
rowOpen: false
}];
}
}
swipeoutOnOpen = index => {
const dataSource = [].concat(this.state.dataSource);
dataSource.forEach((item, mindex) => {
item.rowOpen = mindex === index ? true : false;
});
this.setState({ dataSource });
}

delete = index => {
let dataSource = [].concat(this.state.dataSource);
dataSource.splice(index, 1);
this.setState({ dataSource });
}

renderItem = ({ item, index }) => {
<Swipeout
autoClose
onOpen={() => this.swipeoutOnOpen(index)}
close={!this.state.dataSource[index].rowOpen}
right={[{
text: '删除',
onPress: () => this.delete(index),
type: 'delete',
fontStyle: { color: '#fff', fontSize: 16 }
}]}
>
<Text>{item.title}</Text>
</Swipeout>
}

render() {
<FlatList
keyExtractor={(item) => item.key}
data={this.state.dataSource}
renderItem={this.renderItem}
/>
}
}

交互演示

API

style

包裹swipeout的容器样式

类型(Type) 必传(Required)
ViewProptypes.style

left

往左滑出现的按钮

类型(Type) 必传(Required)
array[actionButton]

往右滑出现的按钮

类型(Type) 必传(Required)
array[actionButton]

buttonWidth

侧滑之后出现按钮的宽度

类型(Type) 必传(Required)
number

backgroundColor

设置swipeout的背景颜色

类型(Type) 必传(Required) 默认值
string #dbddde

disabled

是否禁用swipeout所提供的侧滑操作

类型(Type) 必传(Required) 默认值
bool false

close

当close从false变为true时,会隐藏所有侧滑操作按钮。
反过来true变为false无任何变化。

类型(Type) 必传(Required) 默认值
bool false

autoClose

设置当侧滑操作按钮出现时,点击该按钮自动隐藏所有按钮。

类型(Type) 必传(Required) 默认值
bool false

sectionId

段Id

类型(Type) 必传(Required) 默认值
number -1

rowId

行Id

类型(Type) 必传(Required) 默认值
number -1

onOpen

任意一侧按钮全显示的回调,带有如下参数:

  • sectionId:所在的段Id
  • rowId:所在的行Id
类型(Type) 必传(Required)
(sectionId, rowId) => void

onClose

任意一侧按钮全显示的回调,带有如下参数:

  • sectionId:所在的段Id
  • rowId:所在的行Id
  • direction:左侧或是右侧,‘left’,‘right’
类型(Type) 必传(Required)
(sectionId, rowId, direction?) => void

actionButton API

key

按钮的标识

类型(Type) 必传(Required)
string/number

disabled

按钮是否可以点击

类型(Type) 必传(Required) 默认值
string/number false

onPress

按钮点击的回调

类型(Type) 必传(Required)
() => void

content

自定义按钮,设置了content以后以下的props无效

类型(Type) 必传(Required)
React.ReactElemrnt

backgroundColor

设置按钮颜色

类型(Type) 必传(Required)
Color

color

设置按钮内字体颜色

类型(Type) 必传(Required)
Color

text

设置按钮内文字

类型(Type) 必传(Required)
string

type

设置按钮的类型:

  • delete:backgroundColor为#fb3d38
  • primary: backgroundColor为#006fff
  • secondary:backgroundColor为#fd9427
类型(Type) 必传(Required)
enum: ‘delete’, ‘primary’, ‘secondary’

fontSize

设置按钮的文字大小

类型(Type) 必传(Required) 默认值
number 14

textStyle

设置按钮的文字样式。
注:上方有关文字样式的props的权重较大。

类型(Type) 必传(Required)
Text.propTypes.style

电话咨询

在线咨询

400-881-8611