React Native onPanResponderMove似乎很少被调用

Question

我正在尝试实现一个自定义的垂直滑块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如果在滑块外面跳过)？

更新:

可能问题是你不能PanResponder在手势中立即停止移动,如本GitHub问题所述.

Answer 1

您可以让该值的使用者使用一个值，而不是尝试阻止PanResponder更新该值。例如，如果边界位于和，您可以使用类似以下内容的内容：pan.ypaninterpolated10250

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

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