React Native：如何暫時禁用PanResponder？

Question

下面是創建panResponder的一個實例片段：

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

下面是我的組件的代碼片段：

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

代碼片段卡組件：

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

我正在製作完全定位在另一個之後的牌。然後可以使用panResponder將這些卡片向上或向下滑動。但是，在點擊屏幕時，我應該在同一屏幕上顯示詳細信息頁面。

現在，我可以檢測到水龍頭，但每當用戶點擊/點擊時，我想要禁用panResponder，以便無法刷卡，用戶可以滾動瀏覽內容。一旦用戶滾動到最後，我想重新啓用滑動即我想啓用平移。

我知道onStartShouldSetResponder:() => false禁用panResponder但我們如何在創建實例後禁用它。我在其他地方找不到太多。

Answer 1

代替onStartShouldSetResponder的箭頭功能，您可以使用類函數並使用狀態返回true/false。像這樣的東西

constructor(props) { 
    super(props); 
    this.state = { 
     panResponderEnabled: true 
    } 
    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, 
    }); 
    } 

    handlePanResponderStart =() => { 
    return this.state.panResponderEnabled; 
    } 
    onCardPress =() => { 
    this.setState({ 
     panResponderEnabled: false 
    }); 
    } 
    getCardStyle() { 
    return { 
     ...this.position.getLayout(), 
    }; 
    } 

Answer 2

對於一個將要查找如何暫時禁用PanResponder的人，下面是我的解決方案。

Like @RaHuL - House Javascript注意到了，其他答案並不能真正解決問題，因爲將onStartShouldSetResponder設置爲對應於某些可能從真到假變化的狀態值的值不會影響PanResponder（至少看起來如此）如果它是用true創建的。

我通過更改onPanResponderMove函數解決了類似的問題。我有內部狀態的值：panResponderEnabled和我的功能看起來像這樣：

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

當我不想讀PanRespoder改變我只設置panResponderEnabled爲false。