桌面上的 ion-split-pane，移动设备上的 ion-tabs答案

【问题标题】：ion-split-pane on desktop, ion-tabs on mobile桌面上的 ion-split-pane，移动设备上的 ion-tabs
【发布时间】：2020-08-09 08:10:16
【问题描述】：

我想在应用在桌面（或大屏幕）上显示时显示ion-split-pane

当应用在移动设备上显示时切换为ion-tabs。

这可能吗？我在 React 上使用 Ionic

【问题讨论】：

标签： ionic-framework ionic4 ionic5 ionic-react

【解决方案1】：

鉴于@ionic/react 限制，这是我想出的：

// Define routes as an array of components and add key prop
const routeComponents = [
  <Redirect exact from="/" to={routes.dashboard} />,
  <Route path={routes.dashboard} exact component={DashboardPage} />,
  <Route path={routes.first} exact component={FirstPage} />,
  <Route path={routes.second} exact component={SecondPage} />,
  <Route component={NotFoundPage} />,
].map((Route, index) => ({ ...Route, key: index }))


const App: React.FC = () => {
  const showSplitPane = useBreakpoint('lg')

  return (
    <IonApp>
      <IonReactRouter>
        {showSplitPane
          ?
            <IonSplitPane contentId="main">
              <Menu items={menuItems} />
              <IonRouterOutlet id="main">
                {routeComponents}
              </IonRouterOutlet>
            </IonSplitPane>
          :
            <TabsWrapper items={menuItems}>
              <IonRouterOutlet id="main">
                {routeComponents}
              </IonRouterOutlet>
            </TabsWrapper>
        }
      </IonReactRouter>
    </IonApp>
  )
}

希望有更简单的方法

【讨论】：

【解决方案2】：

这是一个不完美的解决方案，因为这些路线是重复的。

不幸的是，我不知道如何解决这个问题。

const Routes = () => <IonRouterOutlet id="main">
  <Route path="/tabs" component={Tabs} exact={true} />
  <Route path="/tab1" component={Tab1} exact={true} />
  <Route path="/tab2" component={Tab2} exact={true} />
  <Route path="/tab3" component={Tab3} />
  <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
</IonRouterOutlet>

const SplitPane = () => <IonSplitPane contentId="main">
  <Menu />
  <Routes />
</IonSplitPane>

const Tabs = () => <IonTabs>
  <IonRouterOutlet id="main">
    <Route path="/tabs" component={Tabs} exact={true} />
    <Route path="/tab1" component={Tab1} exact={true} />
    <Route path="/tab2" component={Tab2} exact={true} />
    <Route path="/tab3" component={Tab3} />
    <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
  </IonRouterOutlet>
  <IonTabBar slot="bottom">
    <IonTabButton tab="tab1" href="/tab1">
      <IonIcon icon={triangle} />
      <IonLabel>Tab 1</IonLabel>
    </IonTabButton>
    <IonTabButton tab="tab2" href="/tab2">
      <IonIcon icon={ellipse} />
      <IonLabel>Tab 2</IonLabel>
    </IonTabButton>
  </IonTabBar>
</IonTabs>

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        {isPlatform("mobileweb") && <Tabs />}
        {isPlatform("desktop") && <SplitPane />}
      </IonReactRouter>
    </IonApp>
  );
}

export default App;

【讨论】：