如何解决panResponder在每次触摸时都从开始位置开始
尝试使用React Native PanResponder进行滑动。当我在释放后再次单击按钮时,按钮从开始位置开始。我尝试在onPanResponderGrant中使用setoffset,但是滚动按钮时它会使按钮超出父容器。如果sser滚动了容器一半宽度的45%,我会在该一半末端设置动画按钮。
这是我的代码的链接 https://snack.expo.io/@sargnec/react-native-swiper
解决方法
我想我做了一些修改:
-
我保留了
onPanResponderGrant:()=> {
this.pan.setOffset({x:this.pan.x._value});
},handlePanResponderMove 这一点很重要,因此,当用户第二次单击您的按钮并使gestureState.dx = 10时,您的确读取了10像素,而不是自初始位置(第一次单击后)以来的dx。
在handlePanResponderMove上的 -
上,我评论了“ // this.setState({xPosition:gestureState.dx})”。“ xPosition”对于了解起点的位置很有用,因此xPosition + dx越过了限制与否。如果您在panResponderMove上进行更新,则如果您执行许多非常小的dx步骤,那么您将在结束前到达DRAG_TOP_LIMIT
-
ononPanResponderRelease:(a)在这里,我更改了xPosition,并且(b)我没有进行“ gesture.dx> DRAG_TOP_LIMIT”测试,而是“ xPosition + pose.dx> DRAG_TOP_LIMIT”
-
(可选)实际上,您的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 })
}
}
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。