【React-native】基于 PanResponder 实现滑动返回

写在前

新开了一个项目，想实现用户侧滑返回功能，来增进用户浏览体验。

PS：在0.44之后的版本包含了react-navigation，其中自带的侧滑返回体验良好（可参考WX侧滑），本文章针对0.44以下版本可以参考。

---

前置了解

用的了手势系统，可以先行补课 https://reactnative.cn/docs/0.40/panresponder/

 

---

功能实现

先上代码，需要导入 PanResponder

import {
    PanResponder
} from 'react-native';

之后需要在 componentWillMount 中设置监听方法。需要使用 onMoveShouldSetPanResponder 来进行判断。这里判断了dx，也就是从触摸操作开始时的累计横向路程，简单来说，就是用户触摸后移动的距离。这里必须要移动一定的距离后，才判断为触摸，为什么呢？

componentWillMount(evt, gestureState) {
        this._pinchResponder = PanResponder.create({
            /**
             * 在每一个触摸点开始移动的时候，再询问一次是否响应触摸交互
             * 需要注意，当水平位移大于30时，才进行后面的操作，不然可能是点击事件
             * @param evt
             * @param gestureState
             * @returns {boolean}
             */
            onMoveShouldSetPanResponder(evt, gestureState){
                console.log(gestureState.dx)
                if (gestureState.dx > CommonValue.dxNum)
                    return true;
                else
                    return false;
            },
            onPanResponderGrant: (evt, gestureState) => {
                if (gestureState.x0 < CommonValue.x0Num){
                    this.props.navigator.pop();
                }
            },
        });
    }

因为用户的手指，如下图，并不是一个像素点（黄色区域），而是一个区域（红色区域）。如果不判断dx的长度，则会出现用户仅点击，也被算作滑动，故点击事件就失效了。

 

之后，只需把该属性 {...this._pinchResponder.panHandlers} 增加在所需组件上即可。

 <View style={{flex: 1}}
       {...this._pinchResponder.panHandlers}>

 </View>

 

---

扩展功能：

包含搜索框的列表，可以根据 向上/向下 滑动一定距离 隐藏/显示 搜索框。

 

---

常见问题：

1. 在包含上下滑动的列表页面时，需做好滑动距离的判断，以免列表滑动导致无法返回的不良体验。