React native 手势 - ImVeryGood/Loan GitHub Wiki
React-native 手势
componentWillMount() { this.panResponder = PanResponder.create({
/***************** 要求成为响应者 *****************/
// 单机手势是否可以成为响应者
onStartShouldSetPanResponder: (evt, gestureState) => true,
// 移动手势是否可以成为响应者
onMoveShouldSetPanResponder: (evt, gestureState) => true,
// 拦截子组件的单击手势传递,是否拦截
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
// 拦截子组件的移动手势传递,是否拦截
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
/***************** 响应者事件回调处理 *****************/
// 单击手势监听回调
onPanResponderGrant: (e, gestureState) => {
console.log('onPanResponderGrant==>' + '单击手势申请成功,开始处理手势')
this._onPanResponderGrant(e)
},
// 移动手势监听回调
onPanResponderMove: (e, gestureState) => {
console.log('onPanResponderMove==>' + '移动手势申请成功,开始处理手势' + `${gestureState}`)
this._onPanResponderMove(e, gestureState);
},
// 手势动作结束回调
onPanResponderEnd: (evt, gestureState) => {
console.log('onPanResponderEnd==>' + '手势操作完成了,用户离开')
this._onPanResponderEnd(evt)
},
// 手势释放, 响应者释放回调
onPanResponderRelease: (e) => {
// 用户放开了所有的触摸点,且此时视图已经成为了响应者。
// 一般来说这意味着一个手势操作已经成功完成。
console.log('onPanResponderRelease==>' + '放开了触摸,手势结束')
},
// 手势申请失败,未成为响应者的回调
onResponderReject: (e) => {
// 申请失败,其他组件未释放响应者
console.log('onResponderReject==>' + '响应者申请失败')
},
// 当前手势被强制取消的回调
onPanResponderTerminate: (e) => {
// 另一个组件已经成为了新的响应者,所以当前手势将被取消
console.log('onPanResponderTerminate==>' + '由于某些原因(系统等),所以当前手势将被取消')
},
onShouldBlockNativeResponder: (evt, gestureState) => {
// 返回一个布尔值,决定当前组件是否应该阻止原生组件成为JS响应者
// 默认返回true。目前暂时只支持android。
return true;
},
})
}