ReactNative下拉手势，PanResponder

代码开始

import React from 'react';
import { width } from '@/utils'
import { StyleSheet, View, PanResponder, Animated, Text } from 'react-native';
import { useState } from 'react';

// const viewHeight = 300;

const App: React.FC<{}> = () => {
    const position: any = new Animated.ValueXY();

    const [animatedViewHeight, setAnimatedViewHeight] = useState(new Animated.Value(10))

    
    // 展开动画
    const viewAnimatedShow = () => {
        Animated.timing(animatedViewHeight, {
            toValue: 400,
            duration: 300,
            useNativeDriver: false,
        }).start()
    }

    // 这些动画
    const viewAnimatedHide = () => {
        Animated.timing(animatedViewHeight, {
            toValue: 0,
            duration: 300,
            useNativeDriver: false,
        }).start()
    }

    const panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderGrant: () => {
            position.setOffset({ x: position.x._value, y: position.y._value });
            position.setValue({ x: 0, y: 0 });
        },
        onPanResponderMove: Animated.event(
            [
                null,
                { dx: position.x, dy: position.y },
            ],
            { useNativeDriver: false, listener(event) {
                const nativeEvent = event.nativeEvent as any
                setAnimatedViewHeight(nativeEvent.locationY)
                console.log('event', event.target, nativeEvent.locationY)
            }, }
        ),
        onPanResponderRelease: (e, gestureState) => { // 结束动画
            console.log('手势结束', e, gestureState)
            // if (gestureState.dy>=0) {
            //     // 向下滑动
            //     if (viewHeight<200) {
            //         // TODO
            //     } else {
            //         // 结束位置在折叠线上，折叠
            //         viewAnimatedHide()
            //     }
            // } else {
            //     // 向上滑动
            //     if (viewHeight<200) {
            //         // 折叠
            //         viewAnimatedHide()
            //     } else {
            //         // 打开
            //         viewAnimatedShow()
            //     }
            // }
            //   Animated.spring(position, {
            //     toValue: { x: 0, y: 0 },
            //     friction: 5,
            //     useNativeDriver: false
            //   }).start();
        }
    });

    return (
        <View style={styles.container}>
            <Animated.View style={[styles.box, {
                height: animatedViewHeight,
            }]} {...panResponder.panHandlers}>
                <Text>hello world</Text>
            </Animated.View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    box: {
        width,
        backgroundColor: 'blue'
    }
});

export default App;