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

Question

尝试使用 React Native PanResponder 制作 swiper。 当我在释放按钮从开始位置开始后再次单击按钮时。 我尝试在 onPanResponderGrant 中使用 setOffset ，但这会使按钮在滚动时超出父容器。 如果 sser 滚动了 45% 的容器半宽，我正在动画按钮到那半结束。

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

Answer 1

我想我让它工作了，有一些变化：

1. 我一直

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

2. 在handlePanResponderMove 上，我评论了“// this.setState({ xPosition:gestureState.dx })”您的“xPosition”有助于了解您一开始的观点，因此xPosition + dx 是否超过了限制。 如果你在panResponderMove上更新，如果你做了很多非常小的dx步骤，你会在结束前到达DRAG_TOP_LIMIT

3. onPanResponderRelease：(a) 在这里，我更改了 xPosition，并且 (b) 我不测试“gesture.dx > DRAG_TOP_LIMIT”，而是“xPosition +gesture.dx > DRAG_TOP_LIMIT”

4. （可选）实际上，您的 xPosition 没有用于渲染（并且没有用），因此您应该将其从状态中移除，然后将其设为 this._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 })                        
        }                                                                                            
    }                                                                                                
})