文章/答案/技术大牛

发布

问Ionic 4 React汉堡菜单
EN

Stack Overflow用户

提问于 2020-10-14 00:00:47

回答 1查看 492关注 0票数 1

我在执行离子4汉堡菜单时遇到了困难。我将菜单放在单独的组件中，如下所示：

import React from "react";
import {
  IonMenu,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonList,
  IonItem,
  IonButtons,
  IonMenuButton,
  IonIcon,
} from "@ionic/react";
import { menuController } from "@ionic/core";
import { menuOutline } from "ionicons/icons";

const Menu: React.FC = () =>
{
  const onClickHandler = (): void =>
  {
    menuController.open();
  };

  return (
    <React.Fragment>
      <IonMenu side="start" menuId="first" content-id="main">
        <IonHeader translucent>
          <IonToolbar color="primary">
            <IonTitle>
              <IonIcon slot="start" icon={menuOutline}></IonIcon>
            </IonTitle>
            <IonButtons slot="start">
              <IonMenuButton autoHide={false}
                             onClick={() => onClickHandler()}>
              </IonMenuButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonList>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
          </IonList>
        </IonContent>
      </IonMenu>
    </React.Fragment>
  );
};

export default Menu;

然后我试着在我的App.tsx中使用它

我

mport React from "react";
import { Redirect, Route } from "react-router-dom";
import { IonApp, IonRouterOutlet } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";

import Home from "./pages/home/home";
import { ProtectedRoute } from "./security/protectedRoute";
import AdminHome from "./pages/admin/adminHome";
import Menu from "./pages/shared/menu/menu";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";

const App: React.FC = () => (
  <IonApp>
    <Menu />
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/home" component={Home} exact={true} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />

        <ProtectedRoute path="/admin" component={AdminHome} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

我也试着把页眉组件放在首页内容部分，但它从来没有出现过。

ionic4

reactjs

回答 1

Stack Overflow用户

发布于 2020-10-14 04:56:17

在花了更多的时间在官方文档网站上之后，我知道了如何显示汉堡菜单的按钮，以及如何显示/隐藏菜单，或者通过滑动获取菜单。

App.tsx

import React from "react";
import { Redirect, Route } from "react-router-dom";
import { IonApp, IonRouterOutlet, IonSplitPane } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";

import Home from "./pages/home/home";
import { ProtectedRoute } from "./security/protectedRoute";
import AdminHome from "./pages/admin/adminHome";
import Menu from "./pages/shared/menu/menu";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
        <Menu />
        <IonRouterOutlet id="menuContent">
          <Route path="/home" component={Home} exact={true} />
          <Route exact path="/" render={() => <Redirect to="/home" />} />

          <ProtectedRoute path="/admin" component={AdminHome} />
        </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

menu.tsx

import React from "react";
import {
  IonMenu,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonList,
  IonItem,
  IonButtons,
  IonMenuButton,
  IonIcon,
} from "@ionic/react";
import { menuController } from "@ionic/core";
import { menuOutline } from "ionicons/icons";

const Menu: React.FC = () =>
{

  const onClickHandler = (): void =>
  {
    menuController.close();
  };

  return (
    <React.Fragment>
      <IonMenu
        side="start"
        menuId="first"
        content-id="menuContent"
        swipe-gesture={true}
        disabled={false}
        maxEdgeStart={100}
        hidden={false}
        type="overlay">
        <IonHeader translucent>
          <IonToolbar color="primary">
            <IonTitle>
              <IonIcon slot="start" icon={menuOutline}></IonIcon>
            </IonTitle>
            <IonButtons slot="start">
              <IonMenuButton
                autoHide={true}
                onClick={() => onClickHandler()}
              ></IonMenuButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonList>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
            <IonItem>Menu Item</IonItem>
          </IonList>
        </IonContent>
      </IonMenu>
    </React.Fragment>
  );
};

export default Menu;

在页眉上，在IonToolbar标签后面添加您喜欢的图标：

<IonIcon slot="start" icon={menuOutline}
                   onClick={() => onClickHandler()}
                   size="large">

和事件处理程序

  const onClickHandler = () =>
  {
    menuController.open()
  }

此外，还需要导入菜单控件

import { menuController } from "@ionic/core";

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64338899

复制

相似问题

问Ionic 4 React汉堡菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ionic 4 React汉堡菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ionic 4 React汉堡菜单
EN