react-native - 限制 PanResponder Action React Native

Question

这个问题与

React Native: Constraining Animated.Value

ReactNative PanResponder limit X position

我正在尝试使用 PanResponder 构建一个水平 slider 。我可以使用以下代码在 x 轴上移动元素，但我想限制可以移动它的范围。

这是一个带注释的示例:

export class MySlider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pan: new Animated.ValueXY()
        };
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder : () => true,
            onPanResponderGrant: (e, gestureState) => {
                this.state.pan.setOffset(this.state.pan.__getValue());
                this.setState({isAddNewSession:true});
            },
                ///////////////////////////
                // CODE OF INTEREST BELOW HERE
                ///////////////////////////
            onPanResponderMove: (evt, gestureState) => {
                // I need this space to do some other functions
                // This is where I imagine I should implement constraint logic
                return Animated.event([null, {
                    dx: this.state.pan.x
                }])(evt, gestureState)
            },
            onPanResponderRelease: (e, gesture) => { 
                this.setState({isAddNewSessionModal:true});
                this.setState({isAddNewSession:false});
            }
        });
    render() {
        let { pan } = this.state;
        let translateX = pan.x;
        const styles = StyleSheet.create({
            pan: {
                transform: [{translateX:translateX}]
            },
            slider: {
                height: 44,
                width: 60,
                backgroundColor: '#b4b4b4'
            },
            holder: {
                height: 60,
                width: Dimensions.get('window').width,
                flexDirection: 'row',
                backgroundColor: 'transparent',
                justifyContent: 'space-between',
                borderStyle: 'solid',
                borderWidth: 8,
                borderColor: '#d2d2d2'
            }
        });
        const width = Dimensions.get('window').width - 70
        return (
            <View style={styles.holder}>
            <Animated.View 
                hitSlop={{ top: 16, left: 16, right: 16, bottom: 16 }} 
                style={[styles.pan, styles.slider]} 
                {...this._panResponder.panHandlers}/>           
            </View>
            )
    }
}

为了限制值使其不能低于 0，我尝试过执行 if else 逻辑，如下所示:

        onPanResponderMove: (evt, gestureState) => {
            return (gestureState.dx > 0) ? Animated.event([null, {
                dx: this.state.pan1.x
            }])(evt, gestureState) : null
        },

但这是有问题的 - 它最初似乎有效，但最小 x 限制似乎有效增加。我向后和向前滚动的次数越多，最小 x 限制似乎就会增加。

我也试过这个:

        onPanResponderMove: (evt, gestureState) => {
            return (this.state.pan1.x.__getValue() > 0) ? Animated.event([null, {
                dx: this.state.pan1.x
            }])(evt, gestureState) : null
        },

但它似乎根本不起作用。

如何将检测到的手指运动的全部范围内插到我定义的有限范围内？

Answer 1

gestureState.dx是用户每次滑动时用手指从其原始位置移动的差异。因此，只要用户抬起手指，它就会重置，这会导致您的问题。

有几种限制值的方法:

使用插值 :
let translateX = pan.x.interpolate({inputRange:[0,100],outputRange:[0,100],extrapolateLeft:"clamp"})虽然这可行，但用户向左滑动的次数越多，他必须向右滑动越多才能到达“真正的 0”

在发布时重置值

onPanResponderRelease: (e, gestureState)=>{
        this.state.pan.setValue({x:realPosition<0?0:realPosition.x,y:realPosition.y})

}

确保使用 this.state.pan.addListener 获得当前值并放入 realPosition您可以允许向左滑动并在某种 Spring 中将其动画化，或者只是使用以前的插值方法阻止它完全消失。

但是你应该考虑使用别的东西，因为 PanResponder 不支持 useNativeDriver。要么使用 scrollView(如果你想要 4 个方向滚动，则使用其中两个)，它通过它的内容或类似 wix 的 react-native-interactable 来限制滚动。 .