react-native - 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 })                        
        }                                                                                            
    }                                                                                                
})