React Native：如何暂时禁用PanResponder？

下面是创建panResponder的一个实例片段：React Native：如何暂时禁用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但我们如何在创建实例后禁用它。我在其他地方找不到太多。

来源

2017-05-04 rash.tay

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

来源

2017-05-04 08:19:10

我试过了。我将this.handlePanResponderStart分配给您在答案中错过的onStartShouldSetResponder。没有工作。 –

对于一个将要查找如何暂时禁用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。

来源

2017-06-04 09:15:29 bumbur

React Native：如何暂时禁用PanResponder？

回答

相关问题