代码之家 › 专栏 › 技术社区 › Xero

Ionic 5:桌面上的离子拆分窗格,移动设备上的离子选项卡

ionic-react ionic4 ionic-framework

0

Xero · 技术社区 · 5 年前

我想展示一个 ion-split-pane 当应用程序显示时 在桌面上 (或大屏幕)

还有转换到a ion-tabs 当应用程序显示时 在手机上 .

这有可能做到吗?我在用 Ionic on React

0 回复 | 直到 5 年前

1

0

Xero 5 年前

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

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

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;

2

0

piotr_cz 3 年前

考虑到@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>
  )
}

我希望有更简单的方法