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，以便卡片无法滑动，用户可以滚动内容。一旦用户滚动到底部，我想重新启用滑动，即我想启用 pan。

我知道 onStartShouldSetResponder: () => false 可以禁用 panResponder，但如何在创建实例后禁用它呢？我在其他地方找不到太多相关信息。

- shet_tayyy

Answer 1

如果有人想要暂时禁用 PanResponder，以下是我的解决方案。

正如 @RaHuL - House Javascript 所提到的，其他答案并不能真正解决问题，因为将 onStartShouldSetResponder 设置为与某些状态值相对应的值（这些状态值可能从 true 变为 false），如果它是使用 true 创建的，则不会影响 PanResponder（至少似乎是这样）。

我通过更改 onPanResponderMove 函数来解决类似的问题。我有一个内部状态值： panResponderEnabled，我的函数看起来像这样：

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

当我不想读取 PanResponder 的更改时，只需将 panResponderEnabled 设置为 false。

- bumbur

Answer 2

如果您想使用非常简单的暴力解决方案，请在动画视图上使用pointerEvents属性。 pointerEvents={stopPan ? 'none' : 'auto'} 当stopPan为真时，这将停止视图及其下方的所有触摸事件。

- Quantum Ninja

---

好的和简单的。与平面列表配合得很好。 - Rob Sanders

Answer 3

我认为我找到了一个使用 onStartShouldSetResponder 暂时禁用 PanResponder 的方法。目标是在状态值更改时切换 true 和 false，尽管它似乎不会响应状态值的变化。如果您正在使用功能组件，则 hook useRef 似乎可以解决问题。

const [panResponderEnabled, _setPanResponderEnabled] = useState(true)

const panResponderEnabledRef = useRef(panResponderEnabled)
const setPanResponderEnabled = data => {
  panResponderEnabledRef.current = data
  _setPanResponderEnabled(data)
}

然后当您创建PanResponder时：

onStartShouldSetPanResponder: () => panResponderEnabledRef.current,

- mathycoder

Answer 4

你可以使用类函数并使用状态来返回true/false，而不是使用onStartShouldSetResponder的箭头函数。就像这样：

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

- agenthunt

---

我尝试了。我将this.handlePanResponderStart分配给了onStartShouldSetResponder，这是你在回答中忽略了的。但是没有起作用。 - shet_tayyy