仅当我移动手指时才允许Panresponder React native

Posted 2023-02-02

我对原生动画的反应非常新。我想创建向上滑动面板，尽管为此目的有很多库，但是我不想将它们用于自学习。

我编写的代码：-

constructor(props)
        super(props);
        this.animatedHeight = new Animated.Value(100);

        this.panresponder = PanResponder.create(
            onMoveShouldSetPanResponder:()=>true,
            onPanResponderMove:(e,gesture)=>

                if( gesture.dy < 0 && gesture.vy < 0 )
                    this.animatedHeight.setValue(Math.abs(gesture.dy) + 100) // increasing the height. Original height + delta y
                else if(gesture.dy > 0 && gesture.vy > 0)
                     // code for decreasing the height
                
            
        )
    


render()
     return(
        <Animated.View  

            style=[styles.movableContainer,height:this.animatedHeight]
            ...this.panresponder.panHandlers
        ></Animated.View>
    )


const styles = StyleSheet.create(
    movableContainer:
        bottom: 0,
        width:'100%',
        backgroundColor:'red',
        position:'absolute',
        zIndex:9999
    
)

释放后，只要我将手指放回屏幕上，面板就会收缩。我想在移动手指时缩小面板

答案

尝试在创建PanResponder时添加以下代码

    onPanResponderGrant: (evt, gestureState) => 
        this.animatedHeight.setOffset(this.animatedHeight._value);
    
    onPanResponderRelease: (e,  vx, vy ) => 
        this.animatedHeight.flattenOffset();