ReactNative 仿QQ滑动删除组件详解

最新推荐文章于 2021-06-03 10:15:19 发布
最新推荐文章于 2021-06-03 10:15:19 发布
阅读量641 收藏
点赞数
分类专栏： ReactNative 文章标签： React Native 滑动组件 滑动删除组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GL_MINE_CSDN/article/details/99651573
版权

仿QQ滑动组件

    当业务中需要,实现类似QQ滑动删除组件的时候,在Android或者IOS中,都存在封装好的组件,但是在RN中类似组件很少,如何使用RN去开发一个QQ滑动删除组件呢,这就是接下来要做的事情.

资源下载地址: https://download.csdn.net/download/gl_mine_csdn/11562495

滑动之后样式

在这里插入图片描述

滑动之前样式

在这里插入图片描述

组件分析

最外层View组件 嵌套 一个View组件(一个View组件嵌套两个Text组件,并设置space-between) 一个位于上一个组件下面的TouchableWithoutFeedback组件.
监听当前滑动组件的onPanResponderMove方法,来控制组件的位置,然后显示出来删除按钮组件.

组件

import React from 'react';
import {View, Text, StyleSheet, TouchableWithoutFeedback, PanResponder} from 'react-native';
import {deviceWidth, setSpText} from "../../utils/screenUtils"
import themeColor from "../../constants/themeColor";

export default class SwipeDeleteItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            translateX: 0,
        };
        this.pageXStart = null;
        this.pageXEnd = null;
        this.hasClick = false;
    }

    componentWillReceiveProps(nextProps) {

    }


    render() {
        //this.props.list 外部传过来的 列表数据
        //当前的数据结构
        // let obj = {};
        // let closeTime = "07:00";
        // let openTime = "07:00";
        // obj.closeName = "closeName";
        // obj.openName = "openName";
        // obj.closeTime = closeTime;
        // obj.translateX = 0;   //item 移动的距离
        // obj.opacity = 0;     //item 的透明度,因为每一次进入之后,红色的颜色闪烁
        // obj.id = param.id;   
        // obj.delete = ()=>{}; //删除函数         
                
        let {translateX} = this.state;
        let items = this.props.list.map((item, index) => {

            return (
                <View key={index}>
                    <View style={styles.containerStyle}>

                        <View style={[styles.contentStyle, {marginLeft: item.translateX}]}
                              onLayout={this._onLayout_View}//当前布局的layout数据
                              //PanResponder 重点中的重点 让该组件获取手势
                              {...PanResponder.create({
                                  // 要求成为响应者：
                                  onStartShouldSetPanResponder: (evt, gestureState) => true,
                                  onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
                                  onMoveShouldSetPanResponder: (evt, gestureState) => true,
                                  onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

                                  onPanResponderGrant: (evt, gestureState) => {
                                      // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
                                      // gestureState.{x,y} 现在会被设置为0
                                      this.handlerSeekGrant(evt, gestureState);
                                  },
                                  onPanResponderMove: (evt, gestureState) => {
                                      // 最近一次的移动距离为gestureState.move{X,Y}
                                      this.handlerSeekMove(evt, gestureState, index);
                                      // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
                                  },
                                  onPanResponderTerminationRequest: (evt, gestureState) => true,
                                  onPanResponderRelease: (evt, gestureState) => {
                                      // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
                                      // 一般来说这意味着一个手势操作已经成功完成。
                                      this.handlerSeekRelease(evt, gestureState, index, item.id);
                                  },
                                  onPanResponderTerminate: (evt, gestureState) => {
                                      // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
                                  },
                                  onShouldBlockNativeResponder: (evt, gestureState) => {
                                      // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
                                      // 默认返回true。目前暂时只支持android。
                                      return true;
                                  },
                              }).panHandlers}>
                            <View>
                                <View style={styles.itemContentStyle}>
                                    <Text>{item.openName}</Text>
                                    <Text>{item.openTime}</Text>
                                </View>
                                <View style={[styles.itemContentStyle, {marginTop: setSpText(30)}]}>
                                    <Text>{item.closeName}</Text>
                                    <Text>{item.closeTime}</Text>
                                </View>
                            </View>
                        </View>

                        <TouchableWithoutFeedback
                            onLayout={this._onLayout_Delete_View}
                            onPress={() => item.delete()}>
                            <Text style={[styles.deleteStyle, {opacity: item.opacity}]}>{this.props.delete}</Text>
                        </TouchableWithoutFeedback>

                    </View>
                </View>
            )
        });
        return (
            <View>
                <Text style={styles.titleStyle}>{this.props.title}</Text>
                {items.length > 0 ? items : null}
            </View>
        );
    }
    //整体布局的位置
    _onLayout_View = (e) => {
        let {x, y, width, height} = e.nativeEvent.layout;
        console.log("_onLayout_View: x:" + x + ",y:" + y + ",width:" + width + ",height:" + height)
    };
     //删除布局的位置
    _onLayout_Delete_View = (e) => {
        let {x, y, width, height} = e.nativeEvent.layout;
        console.log("_onLayout_Delete_View: x:" + x + ",y:" + y + ",width:" + width + ",height:" + height)
    };

    onPress = (evt) => {
        console.log("onPress---->" + evt)
    };
    //手势第一次触摸的监听
    handlerSeekGrant = (evt, gestureState) => {
        let x = evt.nativeEvent.pageX;
        this.pageXStart = x;
        console.log("handlerSeekGrant: " + x)
    };
    //手势移动的监听
    handlerSeekMove = (evt, gestureState, index) => {
        let x = evt.nativeEvent.pageX;
        let maxX = setSpText(67 * 2);
        this.pageXEnd = x;
        let changeX = this.pageXEnd - this.pageXStart;
        let translateX = 0;
        if (changeX < 0) {//左
            translateX = Math.abs(changeX) > maxX ? -maxX : changeX;
        }
        // this.setState({
        //     translateX: translateX
        // });
        let op = 1;
        this.props.updateItemTranslateX(translateX, index, op);
        console.log("onResponderMove: " + x + " ,changeX: " + changeX + ",index:" + index, ",op:" + op)
    };
    //手势抬起的监听
    handlerSeekRelease = (evt, gestureState, index, id) => {
        let x = evt.nativeEvent.pageX;
        let maxX = setSpText(67 * 2);
        this.pageXEnd = x;
        let changeX = this.pageXEnd - this.pageXStart;

        let translateX = 0;
        if (changeX < 0) {//左
            translateX = Math.abs(changeX) > maxX / 2 ? -maxX : 0;
        } else if (changeX > 0 || changeX === 0) {//右
            translateX = 0;
        }
        // this.setState({
        //     translateX: translateX
        // });
        let op = translateX === 0 ? 0 : 1;
        this.props.updateItemTranslateX(translateX, index, op);
        console.log("onResponderRelease: x:" + x + ",index: " + index + ",changeX: " + changeX + ",op:" + op);
        if (!this.hasClick && Math.abs(changeX) < 5) {//false
            this.props.onItemClick(index, id);
            return;
        }
        this.hasClick = (translateX === -maxX);//true false
    };


}
//样式配置
const styles = StyleSheet.create({
    containerStyle: {
        width: deviceWidth,
        flexDirection: "row",
        marginTop: setSpText(32)
    },
    titleStyle: {
        marginLeft: setSpText(32),
        marginTop: setSpText(32)
    },
    contentStyle: {
        width: deviceWidth,
        backgroundColor: themeColor.white,
        paddingTop: setSpText(40),
        paddingBottom: setSpText(40),
        paddingLeft: setSpText(30),
        paddingRight: setSpText(30)
    },
    itemContentStyle: {
        flexDirection: "row",
        justifyContent: "space-between"
    },
    deleteStyle: {
        backgroundColor: themeColor.color_FF3D33,
        textAlign: "center",
        lineHeight: setSpText(94 * 2),
        height: setSpText(94 * 2),
        width: setSpText(67 * 2),
        color: themeColor.white,
        position: "absolute",
        zIndex: -1,
        right: 0
    }
});

重点内容分以下模块

View组件获取手势的处理
            {...PanResponder.create({
                                  // 要求成为响应者：
                                  onStartShouldSetPanResponder: (evt, gestureState) => true,
                                  onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
                                  onMoveShouldSetPanResponder: (evt, gestureState) => true,
                                  onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

                                  onPanResponderGrant: (evt, gestureState) => {
                                      // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
                                      // gestureState.{x,y} 现在会被设置为0
                                      this.handlerSeekGrant(evt, gestureState);
                                  },
                                  onPanResponderMove: (evt, gestureState) => {
                                      // 最近一次的移动距离为gestureState.move{X,Y}
                                      this.handlerSeekMove(evt, gestureState, index);
                                      // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
                                  },
                                  onPanResponderTerminationRequest: (evt, gestureState) => true,
                                  onPanResponderRelease: (evt, gestureState) => {
                                      // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
                                      // 一般来说这意味着一个手势操作已经成功完成。
                                      this.handlerSeekRelease(evt, gestureState, index, item.id);
                                  },
                                  onPanResponderTerminate: (evt, gestureState) => {
                                      // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
                                  },
                                  onShouldBlockNativeResponder: (evt, gestureState) => {
                                      // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
                                      // 默认返回true。目前暂时只支持android。
                                      return true;
                                  },
                              }).panHandlers}
View组件滑动更新UI的问题
//手势移动的监听
    handlerSeekMove = (evt, gestureState, index) => {
        let x = evt.nativeEvent.pageX;
        let maxX = setSpText(67 * 2);
        this.pageXEnd = x;
        let changeX = this.pageXEnd - this.pageXStart;
        let translateX = 0;
        if (changeX < 0) {//左
            translateX = Math.abs(changeX) > maxX ? -maxX : changeX;
        }
        // this.setState({
        //     translateX: translateX
        // });
        let op = 1;
        this.props.updateItemTranslateX(translateX, index, op);
        console.log("onResponderMove: " + x + " ,changeX: " + changeX + ",index:" + index, ",op:" + op)
    };
View组件滑动之后,点击收回的问题
//手势抬起的监听
    handlerSeekRelease = (evt, gestureState, index, id) => {
        let x = evt.nativeEvent.pageX;
        let maxX = setSpText(67 * 2);
        this.pageXEnd = x;
        let changeX = this.pageXEnd - this.pageXStart;

        let translateX = 0;
        if (changeX < 0) {//左
            translateX = Math.abs(changeX) > maxX / 2 ? -maxX : 0;
        } else if (changeX > 0 || changeX === 0) {//右
            translateX = 0;
        }
        // this.setState({
        //     translateX: translateX
        // });
        let op = translateX === 0 ? 0 : 1;
        this.props.updateItemTranslateX(translateX, index, op);
        console.log("onResponderRelease: x:" + x + ",index: " + index + ",changeX: " + changeX + ",op:" + op);
        if (!this.hasClick && Math.abs(changeX) < 5) {//false
            this.props.onItemClick(index, id);
            return;
        }
        this.hasClick = (translateX === -maxX);//true false
    };
View组件滑动之后,点击事件的处理

    我们会遇到,我们滑动出删除按钮之后,点击组件,组件会收缩回去,收缩之后点击组件相应的点击事件, 在这个问题上我们的处理方式需要进一步的处理

        if (!this.hasClick && Math.abs(changeX) < 5) {//5 是我们设定的一个最小值,可以修改
            this.props.onItemClick(index, id);
            return;
        }

结束语

    通过去封装RN组件,我们会发现,无论是什么语言,最重要的是我们要掌握思想,掌握技术的设计模式,才能更好的去做事情.

Carlos.Guo
关注
专栏目录
ReactNative 实现侧滑删除列表
csdnbnnnb的博客
11-20 2586
ReactNative实现左滑删除列表 背景： 需求中要开发一个可以侧滑删除的列表，发现ReactNative并不未供这种组件。ReactNative本身其实封装了具有侧滑功能的FlatList在以下目录,但已经被弃用了，研究了一下没有搞懂 ./node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableFlatList 之后尝试寻找一些第三方库,一个比较好用的是react-native-swipe-list-view,可以
推荐一款强大的React Native滑动列表视图库——react-native-swipe-list-view
最新发布
gitblog_00024的博客
05-12 377
推荐一款强大的React Native滑动列表视图库——react-native-swipe-list-view react-native-swipe-list-viewA React Native ListView component with rows that swipe open and closed项目地址:https://gitcode.com/gh_mirrors/re/react...
React-Native滑动删除react-native-swipe-list-view
大灰狼的小绵羊哥哥的博客
02-13 4193
https://github.com/jemise111/react-native-swipe-list-view react-native-swipe-list-view  is a ListView with rows that swipe open and closed. Handles default native behavior such as closing ro
React-Native带你一步一步实现侧滑删除
vv_bug
03-13 5810
前言：好久没有写博客了，回想起刚开始写博客的时候对自己的要求，“每周至少一篇！！！“（还有当初说减肥跟写博客同步进行，结果越减越肥。），嗯嗯，说多了都是泪，最近在一直在学习h5，然后看到现在rn项目中有小伙伴在用一个第三方的侧滑删除控件，于是想去看看那些大神是咋实现的，最后发现，也就这样哈～没想象中的那么难，写这篇博客的目的也就是当作一个学习笔记，大牛勿喷！！2017对我来说是不平凡的一年，期间换...
React-Native带你一步一步实现侧滑删除（二）
vv_bug
03-14 4725
上一节我们已经简单的实现了侧滑删除， 我们最后还留了一个小小的功能，那就是当手指抬起的时候，我们需要选择打开或者关闭侧滑功能，我们分几种情况考虑： 大的条件分两种： 一、侧滑已经打开 1、抬起手指的时候，如果偏移的距离&gt;=删除按钮距离（打开） 1、抬起手指的时候，如果偏移的距离&lt;删除按钮距离（关闭） 二、侧滑没有打开 1、抬起手指的时候，如果偏移的距离&gt;=删除按...
android仿QQ滑动删除
08-13
在Android应用开发中，"仿QQ滑动删除"是一种常见的交互设计，用户通过侧滑列表项来触发删除操作，这种设计在很多社交应用中都能看到，比如QQ、微信等。这个项目是基于GitHub上的一个成熟实现，原项目是用Android ...
Android仿腾讯QQ实现滑动删除 附源码下载
09-02
在Android开发中，模仿腾讯QQ的滑动删除功能是一个常见的需求，这能为用户带来更加直观和便捷的操作体验。本文将详细介绍如何实现这样一个功能，并提供源码下载供开发者参考。 首先，滑动删除的核心在于监听...
Android仿qq，微信 滑动删除功能
02-12
以上就是实现Android仿QQ、微信滑动删除功能的基本步骤和技术要点。在实际开发中，可以根据项目需求进行调整和定制，比如添加更多动画效果，或者结合其他交互元素，使功能更加丰富和人性化。在SlideViewDemo中，你...
RN侧滑删除组件
04-11
React-Native手势封装，支持左右侧滑，可定制多个功能按钮，支持iOS和Andriod，使用简单附有Demo
react 移动端实现列表左滑删除的示例代码
12-11
最近做了一个类似系统操作的左滑删除的demo，用的taro框架，和大家分享一下~ 首先需要考虑的有以下几点： 1）布局； 2）判断是左滑还是右滑，左滑时出现删除，右滑时回归原位； 3）排他性，意思是某一个时间只能有一个项出现删除，当有另一个出现删除时，上一个自动回归原位。 我将列表项封装成一个组件，而整个列表是另一个组件。 接下来先说列表项这个组件，逐一解决以上这些问题： 1）布局 我采用的是列表项最外层套一个盒子，这个盒子宽度设置为100vw，并且overflow:hidden。而列表项要包括内容和删除按钮，内容宽度为屏幕宽度，而删除按钮定位到右边，所以整个列表项宽度是超过100
一个强大的ReactNative滑动组件
08-10
一个强大的React Native滑动组件，支持iOS和Android.
react-swipe-to-delete-component：一个简单的React组件实现'swipe to delete'UI模式
02-03
React滑动删除组件 一个简单的React组件实现了“滑动删除” UI模式。 安装 可通过获得React-swipe-to-delete-component。 npm install --save react-swipe-to-delete-component 另外，您可以直接从上面的“ dist”文件夹下载最新版本。 用法 React-swipe-to-delete-component包装您的内容组件。 它被刷了。 如果将其刷除比“要删除的组件”更确定的百分比，则会删除该组件。 例 您可能会看到一个示例。 import React from 'react' ; import { render } from 'react-dom' ; // Import the react-swipe-to-delete-component import SwipeToDelete from 'react-swipe-to-delete-component' ; const data = [ { id : 1 , text : 'End of summer reading list' ,
RN仿QQ实现滑动删除
吴蕴强的博客
10-18 2883
效果图： 通过react-native提供的PanResponder组件来处理滑动事件，类似于android中的view事件传递机制 完整代码：https://github.com/wuyunqiang/SlideItem
记录：RN 实现侧滑删除
YSJ的博客
04-06 892
记录：RN 实现侧滑删除 这段时间 RN 项目里有个侧滑删除的需求，本文对实现过程做个记录。 代码采用纯 RN 编写，总体来说实现起来还是比较简单的，核心部分不超过 100 行代码。 效果图 核心代码 import React, {Component} from 'react'; import {Animated, Easing, PanResponder, View, ViewPropTypes} from 'react-native'; type Props = { style?: ViewPr
react-native-swipe-list-view(二)
RichardLoveMyFamily的博客
03-28 918
平时使用SwipeRow的时候，大家肯定碰到这种情况：就是当我左滑或者右滑一行时，去关闭掉其他行已经左滑或者右滑的行。但是Swiperow自身没有方法实现此情景，下面就是如何使用Swiperow自定义此功能。 //构造器 constructor(props) { super(props); props.loadMore = false; t...
reactnative滑动删除
CY的博客
05-05 5799
尊重版权,转载请注明出处 本文来自:江清清的技术专栏-翻译组(http://www.lcode.org) 开源项目地址:https://github.com/dancormier/react-native-swipeout 项目介绍 该组件进行封装实现仿照QQ,微信列表的右滑显示删除,置顶等其他功能item的效果。 创建的React Native技术交流4群:4589
React Native：侧滑删除组件SwipeableFlatList
weixin_45663264的博客
06-03 495
案例： SwipeableFlatList主要实现代码： <SwipeableFlatList data={this.state.dataArray} renderItem={(data) => this.renderItemView(data)} //侧滑删除 renderQuickActions={() => this.quickActions()} maxSwipeDistance=
Android ListView滑动删除实现详解
"本文将解析如何在Android App的ListView中实现类似QQ的滑动删除功能，主要涉及手势识别、自定义ListView以及PopupWindow的使用。" 在Android应用开发中，ListView是一种常用的组件，用于展示大量的列表数据。为了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值