如何解决ScrollView 中的 PanResponder
我尝试计算一个侧面有弹跳的旋转木马。我尝试自己做,因为 Android 不支持弹跳道具。
我的组件运行良好,但由于某种原因,当用户之前滚动并到达滚动视图的末尾时,我无法重现反弹(此时,它应该反弹)。 当前使其反弹的唯一方法是在触摸之前已经在滚动视图的末尾。
出于某种原因,当用户滚动滚动视图时不会调用 onPanResponderMove。
我的代码:
import React from 'react';
import { StyleSheet,ScrollView,Animated,PanResponder,View } from 'react-native';
class Carousel extends React.Component {
constructor(props){
super(props);
this._props = props;
this._scrolledtoLeft = true;
this._scrolledtoRight = false;
this._gestureState = null;
this._shift = 0;
this._pan = new Animated.ValueXY();
this._panResponder = PanResponder.create({
onMoveShouldSetPanResponder: () => true,onPanResponderMove: (e,gestureState) => {
this._gestureState = gestureState;
if(gestureState.dx >= 0 && this._scrolledtoLeft){
var x = gestureState.dx - this._shift;
if(x < 0){
x = 0;
}
x /= 2;
if(x > 150){
x = 150;
}
this._pan.setValue({x: x,y: 0});
Animated.event([
null,{}
],{useNativeDriver: false})(e,gestureState);
}
else if(gestureState.dx <= 0 && this._scrolledtoRight){
var x = gestureState.dx - this._shift;
console.log(x);
if(x > 0){
x = 0;
}
x /= 2;
if(x < -150){
x = -150;
}
console.log(x);
this._pan.setValue({x: x,gestureState);
}
},onPanResponderRelease: () => {
Animated.timing(this._pan,{ tovalue: {x: 0,y: 0 },duration: 400,useNativeDriver: false }).start(() => {
});
}
});
}
render() {
return (
<Animated.ScrollView {...this._props} horizontal={true} scrollEventThrottle={1} onScroll={(event) => { this.onScroll(event); } } showsHorizontalScrollIndicator={true} bounces={false} style={[{ transform: [{ translateX: this._pan.x }]},styles.scrollView,this._props.style]} {...this._panResponder.panHandlers}>
<View style={{ width: this._props.paddingSides }}></View>
{this._props.children}
<View style={{ width: this._props.paddingSides }}></View>
</Animated.ScrollView>
)
}
onScroll(event){
console.log(event.nativeEvent);
if(event.nativeEvent.contentOffset.x == 0){
if(!this._scrolledtoLeft){
this._shift = this._gestureState.dx;
}
this._scrolledtoLeft = true;
}
else{
this._scrolledtoLeft = false;
}
if(event.nativeEvent.layoutMeasurement.width + event.nativeEvent.contentOffset.x == event.nativeEvent.contentSize.width){
if(!this._scrolledtoRight){
this._shift = this._gestureState.dx;
}
this._scrolledtoRight = true;
}
else{
this._scrolledtoRight = false;
}
}
}
const styles = StyleSheet.create({
scrollView: {
}
});
export default Carousel;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。