2017-11-30 4 views
0

Ich habe ein Elternteil PanResponder mit einem Kind TouchableOpacity. Was passiert ist, dass die TouchableOpacity nicht auf Klicks reagiert, weil die PanResponder den Klick nimmt. Ich habe versucht, diese Anleitung zu folgen, aber keinen Erfolg: http://browniefed.com/blog/react-native-maintain-touchable-items-with-a-parent-panresponder/TouchableOpacity mit Eltern PanResponder

dies ist mein Code:

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) => { 
      }, 
     }); 

und das ist meine Ansicht:

<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> 

Danke

Antwort

0

Die Lösung für meinen Fall war zu ändern onMoveShouldSetPanResponder

onMoveShouldSetPanResponder: (evt, gestureState) => { 
    //return true if user is swiping, return false if it's a single click 
       return !(gestureState.dx === 0 && gestureState.dy === 0)     
} 
Verwandte Themen