Swipeout 侧滑

简介

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

交互演示

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：左侧或是右侧，left，right。

类型	必传
(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	否