我有一个父 PanResponder
和一个子 TouchableOpacity
。问题在于 TouchableOpacity
无法响应点击事件,因为 PanResponder
占用了点击。
我尝试按照这篇指南进行操作,但没有成功:http://browniefed.com/blog/react-native-maintain-touchable-items-with-a-parent-panresponder/
这是我的代码:
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => false,
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
return gestureState.dx != 0 && gestureState.dy != 0;
},
onPanResponderGrant: (evt, gestureState) => {
let isFirst = gestureState.y0 > 164 ? false : true;
this.setState({animObj: isFirst, isUsingCurtain: true});
},
onPanResponderMove: (evt, gestureState) => {
//let Y = this.state.animObj ? gestureState.moveY - this.state.currentHeaderHeight : gestureState.moveY - this.state.currentHeaderHeight ;// - this.state.currentHeaderHeight;
let Y = gestureState.moveY - this.state.currentHeaderHeight + 20
if (Y < 0) {
return false
}
this.state.animCurtain.setValue(Y);
gestureState.moveY > height / 2 ? this.setState({curtainOnMiddle: true}) : this.setState({curtainOnMiddle: false})
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
if (((height / 2) > gestureState.moveY)) {//slide back up1
this._CurtainAnimation(0, false);
} else {//slide to bottom
let val = height - calcSize(180);
this._CurtainAnimation(val, true);
}
},
onPanResponderTerminate: (evt, gestureState) => {
},
onPanResponderStart: (e, gestureState) => {
},
});
这是我的视图:<Animated.View
style={[styles.bottomHPHeader, TopArroOpacity ? {opacity: TopArroOpacity} : ""]} {...this._panResponder.panHandlers}>
<TouchableOpacity onPress={() => this._animateAutoCurtain()}>
{this.state.curtainOnMiddle ?
<AIIcon image={require('../../../../assets/images/homepage/close_drawer_arrow.png')}
boxSize={30}/>
: <AIIcon image={require('../../../../assets/images/homepage/open_drawer_arrow.png')}
boxSize={30}/>}
</TouchableOpacity></Animated.View>
谢谢你
return Math.abs(gestureState.dx) > 2 || Math.abs(gestureState.dy) > 2;
- captainskippah