Native reagieren: Wie PanResponder vorübergehend deaktivieren?

Question

unten ist das Snippet für eine Instanz der panResponder erstellen:

constructor(props) { 
    super(props); 

    this.position = new Animated.ValueXY(); 

    this.panResponder = PanResponder.create({ 
     onStartShouldSetPanResponder: () => true, 
     onPanResponderMove: (event, gesture) => { 
     this.position.setValue({ x: 0, y: gesture.dy }); 
     }, 
     onPanResponderRelease: (event, gesture) => { 
     if (gesture.dy > SWIPE_THRESHOLD) { 
      this.forceSwipe('up'); 
     } else if (gesture.dy < -SWIPE_THRESHOLD) { 
      this.forceSwipe('down'); 
     } else { 
      this.resetPosition(); 
     } 
     }, 
     onMoveShouldSetPanResponderCapture: (evt, gestureState) => 
     gestureState.dx !== 0 && gestureState.dy !== 0, 
    }); 
    } 

    getCardStyle() { 
    return { 
     ...this.position.getLayout(), 
    }; 
    } 

Unter dem Codeausschnitt meiner Komponente ist:

<Animated.View 
    key={ item.id } 
    style={ [ this.getCardStyle(), styles.cardStyle ] } 
    { ...this.panResponder.panHandlers } 
> 
    <Card 
    shouldPanRespond={ this.shouldPanRespond } 
    item={ item } 
    /> 
</Animated.View> 

-Code-Schnipsel für Karten Komponente:

<TouchableOpacity 
    activeOpacity={ 1 } 
    style={ cardStyle } 
    onPress={ this.onPress } 
    > 
    <ScrollView contentContainerStyle={ cardStyle }> 
     <Image 
     resizeMode="cover" 
     style={ imageStyle } 
     source={ { uri: img_url } } 
     /> 

     <View style={ titleWrapStyle }> 
     <Text style={ textStyle }>{ title }</Text> 
     </View> 
    </ScrollView> 
    </TouchableOpacity> 

Ich baue Karten, die absolut hintereinander positioniert sind. Diese Karten können dann mit der panResponder nach oben oder unten gezogen werden. Aber wenn ich auf den Bildschirm tippe, sollte ich eine Detailseite auf demselben Bildschirm zeigen.

Jetzt kann ich den Wasserhahn erkennen, aber wenn der Benutzer tippt/klickt, möchte ich die panResponder deaktivieren, so dass die Karte nicht kopiert werden kann und der Benutzer durch den Inhalt scrollen kann. Sobald der Benutzer zum Ende scrollt, möchte ich das Wischen wieder aktivieren, d. H. Ich möchte das Panning aktivieren.

Ich weiß, dass onStartShouldSetResponder:() => false deaktiviert panResponder, aber wie deaktivieren wir es, nachdem eine Instanz erstellt wurde. Ich konnte sonst nicht viel darüber finden.

Answer 1

Anstelle der Pfeilfunktion für onStartShouldSetResponder können Sie die Klassenfunktion verwenden und den Status verwenden, um true/false zurückzugeben. So etwas wie dieses

Answer 2

Für jemanden, der suchen wird, wie PanResponder vorübergehend deaktivieren, ist unten meine Lösung. Wie @RaHuL - House Javascript hat bemerkt, dass die andere Antwort das Problem nicht wirklich löst, weil die Einstellung onStartShouldSetResponder auf den Wert entsprechend einem Zustandswert, der sich von wahr zu falsch ändern könnte, keinen Einfluss auf PanResponder hat (zumindest scheint es so.)) wenn es mit true erstellt wurde.

Ich löste ähnliches Problem durch die Änderung onPanResponderMove Funktion. Ich habe einen Wert innerhalb Zustand: panResponderEnabled und meine Funktion sieht wie folgt aus:

onPanResponderMove: (event, gesture) => { 
    if(this.state.panResponderEnabled){ 
     this.position.setValue({ x: 0, y: gesture.dy }); 
    } 
} 

Wenn ich will nicht ändert sich von PanRespoder lesen Ich habe nur panResponderEnabled auf false gesetzt.