如何在 react-native 中呈现我的下拉菜单？答案

【问题标题】：How do I render my dropdown menu in react-native?如何在 react-native 中呈现我的下拉菜单？
【发布时间】：2021-09-27 18:54:24
【问题描述】：

我有一个功能组件Profile.js，并在该屏幕的标题上放置了一个按钮。按下此按钮后，我想显示来自react-native-material-menu的下拉菜单

我的Profile.js的一部分：

function Profile(props) {

  useLayoutEffect(() => { 
          props.navigation.setOptions({
            headerRight: () => <HeaderRight />,
          });
        } 
  }, []);

我的HeaderRight 组件：

export const HeaderRight = () => {
  return (
    <TouchableOpacity style={{ marginTop: 20, marginRight: 8 }}>
      <Feather
        name="more-vertical"
        size={24}
        color="black"
        onPress={() => renderMenu()}
      />
    </TouchableOpacity>
  );
};

正如你看到的，当图标被按下时，我打电话给我的renderMenu()，如下所示：

import React, { useState } from "react";
import { View, Text } from "react-native";
import { Menu, MenuItem, MenuDivider } from "react-native-material-menu";

export const renderMenu = (props) => {
  const [visible, setVisible] = useState(true);

  const hideMenu = () => setVisible(false);

  const showMenu = () => setVisible(true);

  return (
    <View
      style={{ height: "100%", alignItems: "center", justifyContent: "center" }}
    >
      <Menu
        visible={visible}
        anchor={<Text onPress={showMenu}>Show menu</Text>}
        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>
    </View>
  );
};

当我渲染我的页面时，我点击了标题图标，我得到了以下错误：

错误：无效的挂钩调用。钩子只能在体内调用的一个功能组件。这可能发生在以下情况之一原因：

您可能有不匹配的 React 版本和渲染器（例如 React DOM）

您可能违反了 Hooks 规则

您可能在同一个应用中拥有多个 React 副本

你能告诉我，我如何渲染我的下拉菜单组件吗？

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

您不会在 onPress 函数返回时呈现 JSX。试试这个：

export const HeaderRight = () => {
  const [visible, setVisible] = useState(false);
  let toggle = () => setVisible(!visible);
  return (
    <>
      <TouchableOpacity style={{ marginTop: 20, marginRight: 8 }}>
        <Feather
          name="more-vertical"
          size={24}
          color="black"
          onPress={toggle}
        />
      </TouchableOpacity>
    <Menu
      visible={visible}
      anchor={<Text onPress={toggle}>Show menu</Text>}
      onRequestClose={toggle}>
        <MenuItem onPress={toggle}>Menu item 1</MenuItem>
        <MenuItem onPress={toggle}>Menu item 2</MenuItem>
        <MenuItem disabled>Disabled item</MenuItem>
        <MenuDivider />
        <MenuItem onPress={toggle}>Menu item 4</MenuItem>
      </Menu>
     </>
  );
};

【讨论】：