如何在React Native中创建类似html的导航下拉菜单？

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, Modal, FlatList } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

// 定义导航下拉菜单组件
const DropdownMenu = ({ navigation }) => {
  const [menuVisible, setMenuVisible] = useState(false);

  const toggleMenu = () => {
    setMenuVisible(!menuVisible);
  };

  const menuItems = [
    { title: 'Home', screen: 'HomeScreen' },
    { title: 'About', screen: 'AboutScreen' },
    { title: 'Contact', screen: 'ContactScreen' },
  ];

  const navigateToScreen = (screen) => {
    navigation.navigate(screen);
    toggleMenu();
  };

  return (
    <View>
      <TouchableOpacity onPress={toggleMenu}>
        <Text>Menu</Text>
      </TouchableOpacity>
      <Modal visible={menuVisible} animationType="slide">
        <FlatList
          data={menuItems}
          renderItem={({ item }) => (
            <TouchableOpacity onPress={() => navigateToScreen(item.screen)}>
              <Text>{item.title}</Text>
            </TouchableOpacity>
          )}
          keyExtractor={(item) => item.title}
        />
      </Modal>
    </View>
  );
};

// 定义导航栈
const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={({ navigation }) => ({
            headerRight: () => <DropdownMenu navigation={navigation} />,
          })}
        />
        <Stack.Screen name="About" component={AboutScreen} />
        <Stack.Screen name="Contact" component={ContactScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;