[英]panResponder starts at begining position in every touch
Trying to make swiper with React Native PanResponder.尝试使用 React Native PanResponder 制作 swiper。 When I click again to button after release button starts at begining position.
当我在释放按钮从开始位置开始后再次单击按钮时。 I tried using setOffset in onPanResponderGrant but that makes button exceeds parent container when you scroll it.
我尝试在 onPanResponderGrant 中使用 setOffset ,但这会使按钮在滚动时超出父容器。 If sser scrolled 45% of the containers half width I'm animating button to that halfs end.
如果 sser 滚动了 45% 的容器半宽,我正在动画按钮到那半结束。
Here is a link for my code https://snack.expo.io/@sargnec/react-native-swiper这是我的代码的链接https://snack.expo.io/@sargnec/react-native-swiper
I think I made it work, with a few changes:我想我让它工作了,有一些变化:
I kept我一直
onPanResponderGrant: () => { onPanResponderGrant: () => {
this.pan.setOffset({x: this.pan.x._value}); this.pan.setOffset({x: this.pan.x._value});
},handlePanResponderMove This is important so that, when a user click a second time on your button and make gestureState.dx = 10, you do read 10px, not dx since initial position (after first click) },handlePanResponderMove 这很重要,因此当用户第二次单击您的按钮并使gestureState.dx = 10 时,您确实读取了10px,而不是自初始位置(第一次单击后)以来的dx
on handlePanResponderMove, I commented "// this.setState({ xPosition: gestureState.dx })" Your "xPosition" is useful to know where was your point in the beginning, so xPosition + dx move past the limit or not.在handlePanResponderMove 上,我评论了“// this.setState({ xPosition:gestureState.dx })”您的“xPosition”有助于了解您一开始的观点,因此xPosition + dx 是否超过了限制。 If you update it on panResponderMove, if you make many very small dx steps, you will reach DRAG_TOP_LIMIT before the end
如果你在panResponderMove上更新,如果你做了很多非常小的dx步骤,你会在结束前到达DRAG_TOP_LIMIT
on onPanResponderRelease: (a) Here, I changed the xPosition, and (b) I do not make a test "gesture.dx > DRAG_TOP_LIMIT", but "xPosition + gesture.dx > DRAG_TOP_LIMIT" onPanResponderRelease:(a) 在这里,我更改了 xPosition,并且 (b) 我不测试“gesture.dx > DRAG_TOP_LIMIT”,而是“xPosition +gesture.dx > DRAG_TOP_LIMIT”
(optional) Actually, your xPosition is not used (and not useful) for the render, so you should remove it from the state and just make this._xPosition (可选)实际上,您的 xPosition 没有用于渲染(并且没有用),因此您应该将其从状态中移除,然后将其设为 this._xPosition
So, here is the code所以,这是代码
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 })
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.