如何使用 Ionic PWA 应用程序在移动 Web 客户端上隐藏选项卡答案

【问题标题】：How to hide Tabs in on Mobile Web client with Ionic PWA app如何使用 Ionic PWA 应用程序在移动 Web 客户端上隐藏选项卡
【发布时间】：2021-06-01 05:47:06
【问题描述】：

标签非常适合在 iOS 和 Android 应用程序中使用，但是由于手机底部导航栏，在移动网络客户端上拥有标签并不理想。一个例子是 Etsy 和 Amazon 如何废弃他们的移动网络客户端中的标签。

如何在移动 Web 客户端的 Ionic React 应用程序中隐藏选项卡？

我想这将涉及使用以下代码包装某种功能或挂钩选项卡。

 <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={home} />
            <IonLabel></IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon icon={cart} />
            <IonLabel></IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon icon={person} />
            <IonLabel></IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab4" href="/tab4">
            <IonIcon icon={menuSharp} />
            <IonLabel></IonLabel>
          </IonTabButton>
        </IonTabBar>

感谢您提供任何独特的见解或观点。

【问题讨论】：

标签： javascript reactjs ionic-framework tabs progressive-web-apps

【解决方案1】：

设置一个绑定到 isPlatform('mobileweb'); 的全局变量；

然后根据这个值隐藏标签面板。

https://ionicframework.com/docs/react/platform

【讨论】：