import { useEffect, useRef, useState } from "react";
import { Animated, Button, Dimensions, Modal, SectionList, StyleSheet, Text, View } from "react-native";
import { SectionData } from "../constants/Data";

const { height: WINDOW_HEIGHT } = Dimensions.get('window');
export default () => {
    const marginTop = useRef(new Animated.Value(WINDOW_HEIGHT)).current;

    const [visible, setVisible] = useState(false);
    useEffect(() => {

    }, []);
    const showModel = () => {
        setVisible(true);

        Animated.timing(marginTop, {
            toValue: 0,
            duration: 500,
            useNativeDriver: false,
        }).start();
    }
    const hideModel = () => {
        Animated.timing(marginTop, {
            toValue: WINDOW_HEIGHT,
            duration: 500,
            useNativeDriver: false,
        }).start(() => {
            setVisible(false);
        });
    }
    const renderItem = ({ item, index, section }) => <Text style={styles.txt}>{item}</Text>
    const renderSectionHeader = ({ section }) => <Text style={styles.section}>{`${section.type}`}</Text>
    return (
        <View style={styles.root}>
            <Button title="按钮" onPress={() => {
                console.log('我在执行，哥');
                showModel();
            }} />
            <Modal
                visible={visible}//是否可见
                onRequestClose={() => {//安卓点返回箭
                    hideModel();
                }}
                transparent={true}//透明
                statusBarTranslucent={true}//状态栏也处理
                animationType='fade'//出来的动画效果
                onShow={() => {
                    console.log(`onShow...`);
                }}
                onDismiss={() => {
                    console.log(`onDismiss...`);
                }}//有bug

            >
                <View style={styles.bland} />
                <Animated.View style={[styles.content, {
                    marginTop: marginTop,
                }]}>
                    <SectionList
                        style={styles.root}
                        sections={SectionData}
                        renderItem={renderItem}
                        keyExtractor={(item, index) => `${item}-${index}`}
                        renderSectionHeader={renderSectionHeader}//分组头部怎么写
                        stickySectionHeadersEnabled={true}//分组吸顶
                    />
                </Animated.View>
            </Modal>
        </View>
    );
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        paddingHorizontal: 16,
    },
    content: {
        width: '100%',
        height: '90%',
        backgroundColor: '#ff000030',
    },
    bland: {
        width: '100%',
        height: '10%',
        backgroundColor: '#00000050',
    },
});

然后显示出来的动画会卡一下。