React Native panResponder在每次触摸的开始位置启动

6mw9ycah  于 2023-08-07  发布在  React
关注(0)|答案(2)|浏览(175)

尝试使用React Native PanResponder创建swiper。当我再次点击按钮后,释放按钮开始在开始的位置。我尝试在onPanResponderGrant中使用setOffset,但这会使按钮在滚动时超出父容器。如果sser滚动了45%的容器半宽度,我将动画按钮移动到该半宽度的末端。
下面是我的代码https://snack.expo.io/@sargnec/react-native-swiper的链接

btxsgosb

btxsgosb1#

我想我做了一些改变,使它工作:
1.我一直
onPanResponderGrant:()=> {
this.pan.setOffset({x:});
},handlePanResponderMove这很重要,这样当用户第二次点击你的按钮并使gestureState.dx = 10时,你确实读到了10 px,而不是dx,因为初始位置(第一次点击后)
1.在handlePanResponderMove上,我评论了“// this.setState({ xPosition:gestureState.dx })”你的“xPosition”对于知道你的点开始的位置很有用,所以xPosition + dx是否超过限制。在panResponderMove上更新的话,如果做很多非常小的dx步骤,就会在结束前到达DRAG_TOP_LIMIT

  1. onPanResponderRelease上:(a)在这里,我改变了xPosition,并且(B)我不进行测试“手势.dx > DRAG_TOP_LIMIT”,而是“xPosition +手势.dx > DRAG_TOP_LIMIT”
    1.(可选)实际上,你的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 })                        
        }                                                                                            
    }                                                                                                
})

字符串

vsmadaxz

vsmadaxz2#

今天碰到这个问题就这样解决了

onPanResponderGrant: () => {
        pan.extractOffset();
    },

字符串

相关问题