RN仿QQ实现滑动删除

最新推荐文章于 2022-09-08 16:18:50 发布

WYQ_XQ

最新推荐文章于 2022-09-08 16:18:50 发布

阅读量2.9k

点赞数 1

分类专栏： react-native 工作中遇到的问题文章标签： react-native listview 滑动事件处理仿QQ滑动删除 slide

本文链接：https://blog.csdn.net/u014041033/article/details/52852836

版权

本文介绍如何利用React Native的PanResponder组件，模仿QQ的滑动删除功能。通过处理滑动事件，实现了在listview中对项目的滑动删除操作。详细代码可在GitHub仓库找到。

摘要由CSDN通过智能技术生成

效果图：

通过react-native提供的PanResponder组件来处理滑动事件，类似于android中的view事件传递机制

部分代码：

    componentWillMount(evt, gestureState){
        this._panResponder=PanResponder.create({
            onStartShouldSetPanResponder:this.onStartShouldSetPanResponder,//开始时询问是否成为响应者
            onMoveShouldSetPanResponder:this.onMoveShouldSetPanResponder,//滑动时询问是否成为响应者
            onPanResponderGrant:this.onPanResponderGrant,//已经成为响应者 类似于android中touch的down事件
            onPanResponderMove:this.onPanResponderMove,//类似于android中touch的move事件
            onPanResponderRelease:this.onPanResponderEnd,//类似于android中touch的up事件
            onPanResponderTerminate:this.onResponderTerminate,//意外终止 类似于android中touch的cancel事件
            onResponderTerminationRequest:this.onResponderTerminationRequest,//其他view想获得事件 是否释放事件
        });
    }

   // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
    onPanResponderGrant=(evt, gestureState)=>{
        // console.log("begin")
        vx = gestureState.vx; //开始时速度为0
        this.pre_hide();/*隐藏之前显示的view*/
        console.log('begin vx:'+ vx);
        if(left_width<SCREEN_WIDTH){//只能向右面滑动
            visible = true;/