OGeek|极客世界-中国程序员成长平台

标题: javascript - react 原生 : How to disable PanResponder temporarily? [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 19:37
标题: javascript - react 原生 : How to disable PanResponder temporarily?

以下是创建 panResponder 实例的 fragment :

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

以下是我的组件的代码 fragment :

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

卡片组件的代码 fragment :

  <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 但我们如何在创建实例后禁用它。我在其他地方找不到太多关于它的信息。

---

Best Answer-推荐答案

对于将要寻找如何暂时禁用 PanResponder 的人，以下是我的解决方案。

就像@RaHuL - House Javascript 注意到的那样，另一个答案并没有真正解决问题，因为将 onStartShouldSetResponder 设置为与某个可能从 true 变为 false 的状态值相对应的值不会影响 PanResponder (至少看起来是这样)如果它是用 true 创建的。

我通过更改 onPanResponderMove 函数解决了类似的问题。我在状态中有一个值:panResponderEnabled，我的函数如下所示:

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

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

关于javascript - react 原生 : How to disable PanResponder temporarily?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43776755/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://jike.in/)

Powered by Discuz! X3.4