javascript - react 原生 : How to disable PanResponder temporarily?
<p><p>以下是创建 <code>panResponder</code> 实例的 fragment :</p>
<pre><code>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(),
};
}
</code></pre>
<p>以下是我的组件的代码 fragment :</p>
<pre><code><Animated.View
key={ item.id }
style={ [ this.getCardStyle(), styles.cardStyle ] }
{ ...this.panResponder.panHandlers }
>
<Card
shouldPanRespond={ this.shouldPanRespond }
item={ item }
/>
</Animated.View>
</code></pre>
<p>卡片组件的代码 fragment :</p>
<pre><code><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>
</code></pre>
<p>我正在构建绝对排在另一张之后的卡片。然后可以使用 <code>panResponder</code> 向上或向下滑动这些卡片。但是，在点击屏幕时，我应该在同一屏幕上显示详细信息页面。</p>
<p>现在，我可以检测到点击，但是每当用户点击/点击时，我想禁用 <code>panResponder</code> 以便无法刷卡并且用户可以滚动浏览内容。一旦用户滚动到最后，我想重新启用滑动，即我想启用平移。</p>
<p>我知道 <code>onStartShouldSetResponder: () => false</code> 禁用 <code>panResponder</code> 但我们如何在创建实例后禁用它。我在其他地方找不到太多关于它的信息。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>对于将要寻找如何暂时禁用 PanResponder 的人，以下是我的解决方案。</p>
<p>就像@RaHuL - House Javascript 注意到的那样，另一个答案并没有真正解决问题，因为将 <code>onStartShouldSetResponder</code> 设置为与某个可能从 true 变为 false 的状态值相对应的值不会影响 PanResponder (至少看起来是这样)如果它是用 <code>true</code> 创建的。</p>
<p>我通过更改 <code>onPanResponderMove</code> 函数解决了类似的问题。我在状态中有一个值:<code>panResponderEnabled</code>，我的函数如下所示:</p>
<pre><code> onPanResponderMove: ( event, gesture ) => {
if(this.state.panResponderEnabled){
this.position.setValue( { x: 0, y: gesture.dy } );
}
}
</code></pre>
<p>当我不想从 PanRespoder 读取更改时，我只需将 <code>panResponderEnabled</code> 设置为 false。</p></p>
<p style="font-size: 20px;">关于javascript -react 原生 : How to disable PanResponder temporarily?，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/43776755/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/43776755/
</a>
</p>
页:
[1]