Swipeout 侧滑

更新时间:2024-06-05 03:14:34下载pdf

简介

Swipeout侧滑是展示侧向滑动的操作组件。

代码演示

说明:详细示例参考 Demo

基本用法

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} /> } }

交互演示

Swipeout 侧滑

API

style

侧滑组件的样式。

类型 必传
ViewPropTypes.style

left

向左滑出现的按钮。

类型 必传
array[actionButton]

right

向右滑出现的按钮。

类型 必传
array[actionButton]

buttonWidth

侧滑之后出现按钮的宽度。

类型 必传
number

backgroundColor

设置侧滑组件的背景颜色。

类型 必传 默认值
string #dbddde

disabled

是否禁用侧滑操作。

类型 必传 默认值
bool false

close

close 参数值由 false 变更为 true 时,会隐藏所有侧滑操作按钮;当 true 变为 false 无任何变化。

类型 必传 默认值
bool false

autoClose

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

类型 必传 默认值
bool false

sectionId

段落 ID。

类型 必传 默认值
number -1

rowId

行 ID。

类型 必传 默认值
number -1

onOpen

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

  • sectionId:所在的段落 ID。
  • rowId:所在的行 ID。
类型 必传
(sectionId, rowId) => void

onClose

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

  • sectionId:所在的段落 ID。
  • rowId:所在的行 ID。
  • direction:左侧或是右侧,leftright
类型 必传
(sectionId, rowId, direction?) => void

actionButton API

key

按钮的标识。

类型 必传
string/number

disabled

按钮是否可以点击。

类型 必传 默认值
string|number false

onPress

按钮点击的回调。

类型 必传
() => void

content

自定义按钮。若设置 content 则以下属性无效。

类型 必传
React.ReactElemrnt

backgroundColor

设置按钮颜色。

类型 必传
Color

color

设置按钮内字体颜色。

类型 必传
Color

text

设置按钮内文字。

类型 必传
string

type

设置按钮的类型:

  • delete,背景颜色为#fb3d38
  • primary,背景颜色为#006fff
  • secondary,背景颜色为#fd9427
类型 必传
enum: ‘delete’, ‘primary’, ‘secondary’

fontSize

设置按钮的文字大小。

类型 必传 默认值
number 14

textStyle

设置按钮的文字样式。

类型 必传
Text.propTypes.style