我的组件正常工作,但它会覆盖react-navigation
的边缘滑动以返回。
我如何捕获平移处理程序的“开始”,以使“返回”手势不会被覆盖?
import React from 'react'
import { PanResponder, Animated, View } from 'react-native'
class SwipeView extends React.Component{
translateX = new Animated.Value(0);
panResponder = PanResponder.create({
onMoveShouldSetPanResponderCapture: (e, gs) => {
return gs.dx > 0 //only allow right swipes
},
onPanResponderMove: (e, gs) => {
if(gs.dx > 0) { //only allow right swipes
Animated.event([null, {dx: this.translateX}])(e, gs)
}
},
onPanResponderTerminationRequest: (e, gs) => {
return false
},
onPanResponderTerminate: (e, {vx, dx} ) => {
//do nothing
},
onPanResponderRelease: (e, {vx, dx}) => {
Animated.spring(this.translateX, { toValue: 0, bounciness: 8, speed:48, }).start((result) => {
if(dx > 24){
if(this.props.onSwipe) this.props.onSwipe(this.props)
}
});
},
})
constructor(props){
super(props)
}
render(){
return(
<Animated.View
style={{transform: [{translateX: this.translateX}]}} {...this.panResponder.panHandlers}
>
<View>{React.cloneElement(this.props.children, this.props)}</View>
</Animated.View>
)
}
}
export default SwipeView