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

Question

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

我编写的代码：-

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
    }
})

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

Answer 1

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

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