React Native onPanResponderMove 似乎被调用的太少了

Posted 2023-02-16

【中文标题】React Native onPanResponderMove 似乎被调用的太少了

【英文标题】：React Native onPanResponderMove seems to be called too rarely

【发布时间】：2018-02-11 08:44:09

【问题描述】：

我正在尝试在React Native 中实现一个自定义的垂直滑块。为此，我使用了PanResponder。由于滑块是垂直的，我只更改 y 值。为了在滑块的边框上停止对象，我在调用 Animated.event 之前检查它是否已经到达。

在我快速滑动对象之前，我的滑块工作正常。然后onPanResponderMove回调似乎被调用得太少了，对象停在轨道之外，比边界更远。

componentWillMount() 
    this.panResponder = PanResponder.create(
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
        onMoveShouldSetPanResponder: (evt, gestureState) => true,
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
        onPanResponderGrant: this._handleOnPanResponderGrant.bind(this),
        onPanResponderMove: this._handleOnPanResponderMove.bind(this),
        onPanResponderRelease: this._handleOnPanResponderRelease.bind(this)
    )


_handleOnPanResponderGrant() 
    this.state.pan.setOffset( x: this.state.pan.x._value, y: this.state.pan.y._value )
    this.state.pan.setValue( x: 0, y: 0 )


_handleOnPanResponderMove(e, gestureState) 
    // some calculations - seems to be correct since everything is working fine until I swipe very fast
    if (reachedBorders(...))  // this takes into account also the direction so it won't get stuck on the border
        return true
    
    return Animated.event([null,  dy: this.state.pan.y ])(e, gestureState)


_handleOnPanResponderRelease() 
    this.state.pan.flattenOffset()

我做错了什么？我的方法是否正确（如果在滑块之外跳过Animated.event）？

更新：

问题可能是您无法在this GitHub issue 中描述的手势过程中立即停止PanResponder 的移动。

【参考方案1】：

您可以让pan 值的使用者改用interpolated 值，而不是试图阻止PanResponder 更新pan.y 值。例如，如果边界在10 和250，您可能会使用类似：

... style=transform: [translateY: this.state.pan.y.interpolate(
       inputRange: [10, 250],
       outputRange: [10, 250],
       extrapolate: 'clamp'
     )]

在Release 方法中，您还需要将值限制在边界内，但插值会防止动画走得太远。