时间戳

首页 > 解决方案 > 如何使用 Ionic React 从 IonTabBar 触发 IonModal

reactjs - 如何使用 Ionic React 从 IonTabBar 触发 IonModal

问题描述

我有一个特定的用例，我需要通过单击选项卡栏中的选项卡来触发模式打开。类似于 Instagram 在单击标签栏中的 (+) 图标以添加新帖子时触发模式打开的方式。

鉴于设置了以下 Ionic React 选项卡，我应该如何重新配置​​以使其工作？我非常希望避免将我的模式代码复制/粘贴到每一页上。

应用程序.tsx

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

  return (
    <IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/signup" component={SignUp} exact={true} />
            <Route path="/login" component={Login} exact={true} />
            <Route path="/home" component={Home} />
            <Redirect exact from="/" to="/home" />
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="home" href="/home">
              <IonIcon icon={triangle} />
              <IonLabel>Explore</IonLabel>
            </IonTabButton>
            <IonTabButton tab="submit" href="/submit">
              <IonIcon icon={addCircle} />
              <IonLabel>Submit</IonLabel>
            </IonTabButton>
            <IonTabButton tab="login" href="/login">
              <IonIcon icon={square} />
              <IonLabel>Log In</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonApp>
  );
};

我应该在哪里插入以下内容，以便我可以从标签栏触发它并让它覆盖页面内容，无论我在哪个标签中？

<IonModal isOpen={showModal}>
     <p>This is modal content</p>
     <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
</IonModal>

标签： reactjsionic-frameworkionic-react

解决方案

https://ionicframework.com/docs/api/tabs

根据 tabs api，您可以确定用户和调用选择了哪个选项卡setShowModal(true)

在选项卡事件下 - https://ionicframework.com/docs/api/tabs#events 有一个名为的事件tabSelected

推荐阅读