2017-11-30 5 views
0

私は、子TouchableOpacityを持つ親PanResponderを持っています。 PanResponderがクリックを獲得するため、TouchableOpacityはクリックに反応しません。 私は、このガイドが、なしの成功を追跡しようとしている: http://browniefed.com/blog/react-native-maintain-touchable-items-with-a-parent-panresponder/TouchableOpacity with親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> 

答えて

0

ありがとう私の場合の解決策は変更することでした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)     
} 
関連する問題