如何在 Ion React 中结合侧边菜单和标签导航

Question

我在 ionic react 应用程序中有一个选项卡导航页面，我想向该页面添加一个侧边菜单，我知道我必须使用 IonMenu 组件，但我正在努力将两者合并。这是我的代码，指示我如何实现标签导航：

import React, { Component } from "react";
 import {
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
} from "@ionic/react";

import { Redirect, Route } from "react-router-dom";
import { IonReactRouter } from "@ionic/react-router";
import { home, at, albums,addCircleOutline } from "ionicons/icons";

import Tab1 from "./Tab1";
import Tab2 from "./Tab2";
import Tab3 from "./Tab3";
import Tab4 from "./Tab4";

class Home extends Component {
  render() {
    return (
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/tab1" component={Tab1} exact={true} />
            <Route path="/tab2" component={Tab2} exact={true} />
            <Route path="/tab3" component={Tab3} />
            <Route path="/tab4" component={Tab4} />
            <Route
              path="/"
              render={() => <Redirect to="/tab1" />}
              exact={true}
            />
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="tab1" href="/tab1">
              <IonIcon icon={home} />
              <IonLabel>Home</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab2" href="/tab2">
              <IonIcon icon={albums} />
              <IonLabel>Saved</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab4" href="/tab4">
              <IonIcon icon={addCircleOutline} />
              <IonLabel>Request</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab3" href="/tab3">
              <IonIcon icon={at} />
              <IonLabel>About</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    );
  }
}

export default Home;

我需要知道如何向此页面添加侧边菜单，以及如何添加按钮，以便单击时按钮会打开侧边菜单

Answer 1

首先，对于要添加到选项卡菜单中的所有页面，设置以 /tabs/* 开头的路径，例如 /tabs/tab1、/tabs/tab2、/tabs/tab3 等。

您需要创建一个具有名称的组件，例如，具有选项卡导航的 MainTabs 和仅包含选项卡导航中页面路由的 IonRouterOutlet。它可能看起来像这样：

<IonTabs>
    <IonRouterOutlet>
      <Route path="/tabs/tab1" component={Tab1} exact/>
      <Route path="/tabs/tab2" component={Tab2} exact/>
      <Route path="/tabs/tab3" component={Tab3} exact/>
    </IonRouterOutlet>
    <IonTabBar slot="bottom">
      <IonTabButton tab="tab1" href="/tabs/tab1">
        <IonLabel>Tab 1</IonLabel>
      </IonTabButton>
      <IonTabButton tab="tab2" href="/tabs/tab2">
        <IonLabel>Tab 2</IonLabel>
      </IonTabButton>
      <IonTabButton tab="tab3" href="/tabs/tab3">
        <IonLabel>Tab 3</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>

然后在 App.tsx 中，你可以添加一个典型的侧边菜单代码，但有一个重要的路线：

<Route path="/tabs" component={MainTabs} />

此路由器插座没有“精确”道具，将选取所有以 /tabs/ 开头且在 MainTabs 组件中的路由器插座中定义的路由。因此，App.tsx 文件可能如下所示：

<IonReactRouter>
  <IonSplitPane contentId="main">
    <IonMenu contentId="main">
      <IonContent>
        <IonList>
          // here you can put your side menu items with router links
        </IonList>
      </IonContent>
    </IonMenu>
    <IonRouterOutlet id="main">
      // Important route for tabs navigation!
      <Route path="/tabs" component={MainTabs} />
      // and here are defined every other route in your app
      <Route path="/sideMenu1" component={SideMenu1} exact />
      <Route path="/sideMenu2" component={SideMenu2} exact />
      <Route path="/sideMenu3" component={SideMenu3} exact />
    </IonRouterOutlet>
  </IonSplitPane>
</IonReactRouter>

要添加侧边菜单切换按钮，您需要在 IonToolbar 组件中使用 IonMenuButton 组件。例子：

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonButtons slot="start">
        <IonMenuButton />
      </IonButtons>
      <IonTitle>My profile</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent className="ion-padding">
    // page content
   </IonContent>
</IonPage>

我希望这个能帮上忙！