0

我刚刚从 React 和 Flutter 背景开始掌握 Ionic。

我正在尝试使用 Ionic 4 react 实现全局导航顶部栏。唯一看起来可能有效的文档是 IonHeader。

我试图将它添加到我的根 App.tsx 组件中，但这似乎没有按预期工作。Toolbar 组件的高度不被其他组件识别。即，工具栏与页面内容重叠。

尝试来自 App.tsx 的全局工具栏：

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { 
    IonApp,
    IonRouterOutlet,
    IonHeader,
    IonToolbar,
    IonTitle
 } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import DashboardA from './containers/Dashboards/DashboardA';
import DashboardB from './containers/Dashboards/DashboardB';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

import styled from 'styled-components';

const App: React.FC = () => (
<div>
    <IonApp>
  <IonHeader>
      <IonToolbar>
        <IonTitle>My Global Navigation</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonReactRouter>
        <IonRouterOutlet>
        <Route
            path="/DashboardA"
            component={DashboardA}
            exact={true}
        />
        <Route
            path="/DashboardB"
            component={DashboardB}
            exact={true}
        />
        <Route
            exact
            path="/"
            render={() => <Redirect to="/DashboardB" />}
        />
        </IonRouterOutlet>
    </IonReactRouter>
    </IonApp>
</div>
);

export default App;

仪表板 A 组件：

import React, { Component } from 'react';
import {
IonCard,
IonCardContent,
IonCardHeader,
IonCardTitle,
IonContent,
IonGrid,
IonRow,
IonCol
} from '@ionic/react';

class DashboardA extends Component {
render() {
    return (
    <IonContent padding-start="150">
        <IonGrid>
        <IonRow>
            <IonCol size-xs="12" size-md="6">
            <IonCard>
                <IonCardHeader>
                <IonCardTitle>Thing</IonCardTitle>
                </IonCardHeader>

                <IonCardContent>BAR CHART</IonCardContent>
            </IonCard>
            </IonCol>
            <IonCol size-xs="12" size-md="6">
            <IonCard>
                <IonCardHeader>
                <IonCardTitle>Other Thing</IonCardTitle>
                </IonCardHeader>

                <IonCardContent>BAR CHART</IonCardContent>
            </IonCard>
            </IonCol>
        </IonRow>
        </IonGrid>
    </IonContent>
    );
}
}

export default DashboardA;

我能看到的唯一解决方法是在每个页面的 IonHeader 中导入和使用导航栏，但事情看起来真的很笨重。有没有办法在 App.tsx 中引用工具栏？我很欣赏有明显的 CSS hack 来填充，但如果有一种“正确”的做法，我不想走这条路。

谢谢！

4

1 回答 1

0

Having spoken to one of the developer advocates I think that it is fair to say that what I was trying to achieve is an Ionic anti pattern.

The navigation has been designed to be added to each and in the .

So you can just have a navigation components and import where you need it.

于 2020-01-29T15:46:43.270 回答