reactjs - 反应原生如何动画视图打开->向下

Question

考虑以下组件，其中用户从列表中选择一个选项：

import React, { Component } from "react";
import PropTypes from "prop-types";

import {
    View,
    Text,
    StyleSheet,
    Platform,
    FlatList,
    TouchableNativeFeedback,
    TouchableOpacity,
    PLatform
} from "react-native";

import Icon from "react-native-vector-icons/Ionicons";

import { colors, metrics } from "../../themes";

const Touchable =
    Platform.OS === "android" ? TouchableNativeFeedback : TouchableOpacity;

class MenuSelector extends Component<{
    onSelect: () => any,
    config: object,
    selected: string
}> {
    state = {
        listOpened: false
    };

    handlePress = id => {
        this.props.onPress(id);
    };

    handleSelect = id => {
        if (this.props.onSelect) this.props.onSelect(id);

        this.setState({
            listOpened: false
        });
    };

    handleMenu = () => {
        this.setState({
            listOpened: !this.state.listOpened
        });
    };

    render = () => {
        let title = "";

        if (this.props.config) {
            title = this.props.config[0].title;

            if (this.props.selected) {
                let found = this.props.config.find(item => {
                    return item.id === this.props.selected;
                });

                if (found) title = found.title;
            }
        }

        let top = (
            <View style={styles.header}>
                <Text style={styles.text}>{title}</Text>
                <Touchable>
                    <Text style={styles.text}>
                        <Icon
                            name={"ios-menu"}
                            size={20}
                            onPress={this.handleMenu}
                        />
                    </Text>
                </Touchable>
            </View>
        );

        let list = null;
        if (this.state.listOpened === true) {
            list = (
                <FlatList
                    data={this.props.config}
                    renderItem={({ item }) => (
                        <Touchable onPress={this.handleSelect}>
                            <Text style={[styles.text, styles.listItem]}>{item.title}</Text>
                        </Touchable>
                    )}
                />
            );
        }

        return (
            <View style={styles.container}>
                {top}
                {list}
            </View>
        );
    };
}

export default MenuSelector;

const styles = StyleSheet.create({
    container: {
        flex: -1,
        flexDirection: "column"
    },
    header: {
        flex: -1,
        flexDirection: "row",
        justifyContent: "space-between",
        padding: 10,
        backgroundColor: "blue"
    },
    text: {
        fontSize: 16,
        color: "white",
        textAlign: "center",
        fontWeight: "bold"
    },
    listItem: {
        padding: 10,
        backgroundColor: "blue"
    }
});

该组件在以下上下文中使用：

let config = [
   {
       title="Option 1",
       id="option1"
   },
   {
       title="Option 2",
       id="option2"
   },
   {
       title="Option 3",
       id="option3"
   },
   {
       title="Option 4",
       id="option4"
   },
];

return (
  <View style={styles.container}>
    <MenuSelector
      config={config.options}
      selected={this.state.mode}
      onPress={this.handleButtonListPress}
    />
    <FlatList
      data={this.props.data}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => (
        <Text style={styles.text}>{item.name}</Text>
      )}
    />
  </View>
);

实际上，该<MenuSelector>组件“立即”出现在屏幕上。我需要添加一个滑动效果，当数据出现在屏幕上时<MenuSelector>“下推”数据......FlatList

关闭时，行为相同，但动画从下到上。

如何将这种动画行为添加到我的MenuSelector组件中？