1

我在 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;

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

4

2 回答 2

7

首先，对于您要添加到选项卡菜单的所有页面，设置以 /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>

我希望这个能帮上忙！

于 2020-07-02T22:25:37.233 回答
1

只需用拆分窗格包裹整个东西。

<IonReactRouter>
  <IonSplitPane contentId="main">
    <Menu />
    <IonRouterOutlet id="main">
      <Route path="/page/:name" component={Page} exact />
      <Route path="/tabs" component={TabRootPage} />
      <Redirect from="/" to="/tabs" exact />
    </IonRouterOutlet>
  </IonSplitPane>
</IonReactRouter>

请参阅此处的示例 - https://github.com/aaronksaunders/ionic-sidemenu-tabs-auth-starter

于 2020-06-28T01:23:06.900 回答