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 (将#修改为@）