探索React Native Material Menu: 优雅的下拉菜单解决方案

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
 
const MaterialMenu = (props) => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const openMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const closeMenu = () => {
    setAnchorEl(null);
  };
 
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <TouchableOpacity onPress={openMenu}>
        <Icon name="more-vert" size={24} color="black" />
      </TouchableOpacity>
      {props.children(anchorEl, openMenu, closeMenu)}
    </View>
  );
};
 
export default MaterialMenu;

这个代码实例展示了如何在React Native应用中创建一个类似于Material Design规范的下拉菜单组件。它使用了React Hooks来管理菜单的打开和关闭，并允许开发者通过props.children传入自定义的菜单项。这是一个简洁且易于理解的下拉菜单实现，适合作为学习React Native组件设计的参考。