以下是创建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
,但如何在创建实例后将其禁用。我在其他地方找不到更多的东西。 最佳答案
对于将要如何临时禁用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。