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