react native 关于 ReactNative 页面添加左右上下滑动的手势监听

通过react native引入PanResponder

import {PanResponder} from 'react-native';

然后创建手势监听

_panResponder = PanResponder.create({

onStartShouldSetPanResponder: () => true,

onMoveShouldSetPanResponder: () => true,

onPanResponderGrant: () => {

// console.log('开始移动：');

},

onPanResponderMove: (evt, gs) => {

// console.log('正在移动：X轴：' + gs.dx + '，Y轴：' + gs.dy);

},

onPanResponderRelease: (evt, gs) => {

console.log('结束移动：X轴移动了：' + gs.dx + '，Y轴移动了：' + gs.dy);

if (gs.dx > 50) {

console.log('由左向右');

this.goBack()

} else if (gs.dx < -50) {

console.log('由右向左');

} else if (gs.dy > 50) {

console.log('由上向下');

} else if (gs.dy < -50) {

console.log('由下向上');

}

}

});

在你需要的View中加入即可

...

完成

参考文章