如何在React Native中使用react-native-material-menu渲染下拉菜单？

你遇到的报错是因为违反了React Hook的调用规则：useState只能在函数组件的顶层渲染阶段调用，你在点击图标触发的事件回调里执行renderMenu()，而renderMenu内部用到了useState，此时不属于组件的顶层渲染流程，所以抛出无效Hook调用错误。
同时你对react-native-material-menu的使用逻辑有误：该组件的菜单不需要通过点击事件手动调用函数渲染，只需要和触发按钮同属一个组件，由状态控制显隐即可。

无需保留单独的renderMenu函数，直接修改HeaderRight组件代码即可：

import React, { useState } from "react";
import { TouchableOpacity } from "react-native";
import Feather from 'react-native-vector-icons/Feather';
import { Menu, MenuItem, MenuDivider } from "react-native-material-menu";

export const HeaderRight = () => {
  // 菜单显隐状态放在组件顶层调用
  const [menuVisible, setMenuVisible] = useState(false);

  const hideMenu = () => setMenuVisible(false);
  const showMenu = () => setMenuVisible(true);

  return (
    <Menu
      visible={menuVisible}
      // 将触发按钮直接绑定到anchor属性
      anchor={
        <TouchableOpacity style={{ marginTop: 20, marginRight: 8 }}>
          <Feather
            name="more-vertical"
            size={24}
            color="black"
            onPress={showMenu}
          />
        </TouchableOpacity>
      }
      onRequestClose={hideMenu}
    >
      <MenuItem onPress={hideMenu}>Menu item 1</MenuItem>
      <MenuItem onPress={hideMenu}>Menu item 2</MenuItem>
      <MenuItem disabled>Disabled item</MenuItem>
      <MenuDivider />
      <MenuItem onPress={hideMenu}>Menu item 4</MenuItem>
    </Menu>
  );
};

Profile.js的原有代码不需要做任何调整。

• 把菜单显隐的状态Hook移到HeaderRight组件的顶层，符合Hook调用规则
• 直接将触发菜单的更多图标按钮作为Menu组件的anchor属性值，无需额外的渲染调用逻辑
• 点击按钮直接修改状态控制菜单显隐，React会自动处理菜单的渲染和销毁

内容的提问来源于stack exchange，提问作者newbie coder