panResponder在每次触摸时都从开始位置开始

问题描述

尝试使用React Native PanResponder进行滑动。当我在释放后再次单击按钮时，按钮从开始位置开始。我尝试在onPanResponderGrant中使用setoffset，但是滚动按钮时它会使按钮超出父容器。如果sser滚动了容器一半宽度的45％，我会在该一半末端设置动画按钮。

这是我的代码的链接 https://snack.expo.io/@sargnec/react-native-swiper

解决方法

我想我做了一些修改：

1. 我保留了

   onPanResponderGrant：（）=> {
   this.pan.setOffset（{x：this.pan.x._value}）;
   }，handlePanResponderMove 这一点很重要，因此，当用户第二次单击您的按钮并使gestureState.dx = 10时，您的确读取了10像素，而不是自初始位置（第一次单击后）以来的dx。

在handlePanResponderMove上的

2. 上，我评论了“ // this.setState（{xPosition：gestureState.dx}）”。“ xPosition”对于了解起点的位置很有用，因此xPosition + dx越过了限制与否。如果您在panResponderMove上进行更新，则如果您执行许多非常小的dx步骤，那么您将在结束前到达DRAG_TOP_LIMIT

3. ononPanResponderRelease：（a）在这里，我更改了xPosition，并且（b）我没有进行“ gesture.dx> DRAG_TOP_LIMIT”测试，而是“ xPosition + pose.dx> DRAG_TOP_LIMIT”

4. （可选）实际上，您的xPosition并未用于渲染（且无用），因此您应将其从状态中删除，然后进行修改。_xPosition

所以，这是代码

pan = new Animated.ValueXY();                                                                        
handlePanResponderMove = (e,gestureState) => {                                                      
    const currentValue = this.state.xPosition + gestureState.dx                                      
    if (currentValue > DRAG_TOP_LIMIT) {                                                             
        this.pan.setValue({ x: DRAG_TOP_LIMIT })                                                     
    } else if (currentValue < DRAG_ALT_LIMIT) {                                                      
        this.pan.setValue({ x: DRAG_ALT_LIMIT })                                                     
    } else {                                                                                         
        this.pan.setValue({ x: gestureState.dx })                                                    
    }                                                                                                
};                                                                                                                                                                                                       
panResponder = PanResponder.create({                                                                 
    onMoveShouldSetPanResponder: () => true,onPanResponderGrant: () => {                                                                     
        this.pan.setOffset({x: this.pan.x._value});                                                  
    },onPanResponderMove: (e,gestureState) => this.handlePanResponderMove(e,gestureState),onPanResponderRelease: (e,gestureState) => {                                                    
        this.pan.flattenOffset();                                                                    
        const currPosition = gestureState.dx + this.state.xPosition                                  
        if (currPosition >= DRAG_TOP_LIMIT * 0.45) {                                                 
            Animated.timing(this.pan.x,{                                                            
                toValue: DRAG_TOP_LIMIT,duration: 100                                                                        
            }).start()                                                                               
            this.setState({xPosition: DRAG_TOP_LIMIT})                                               
        } else if (currPosition <= DRAG_ALT_LIMIT * 0.45) {                                          
            Animated.timing(this.pan.x,{                                                            
                toValue: DRAG_ALT_LIMIT,duration: 100                                                                        
            }).start()                                                                               
            this.setState({xPosition: DRAG_ALT_LIMIT})                                               
        } else {                                                                                     
          this.setState({xPosition: this.state.xPosition + gestureState.dx })                        
        }                                                                                            
    }                                                                                                
})