ionic-framework - 桌面上的 ion-split-pane，移动设备上的 ion-tabs

Question

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

并切换到ion-tabs当应用程序显示在手机上时。

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

Answer 1

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

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

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;

Answer 2

鉴于@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>
  )
}

我希望有一个更简单的方法