Глобальная панель инструментов в Ioni c 4 (React) с перекрытием IonContent - PullRequest
Новая
       61

Глобальная панель инструментов в Ioni c 4 (React) с перекрытием IonContent

0 голосов
/ 09 января 2020

Я только начинаю понимать Ioni c из фона React и Flutter.

Я пытаюсь создать глобальную верхнюю панель навигации, используя Ioni c 4 реагировать. Единственная документация, которая выглядит так, как будто она может работать, - это IonHeader.

Я пытался добавить это к своему root компоненту App.tsx, но, похоже, он работает не так, как ожидалось. Высота компонента панели инструментов не распознается другими компонентами. Т.е. панель инструментов перекрывает содержимое страницы.

Попытка глобальной панели инструментов из 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 взлом на пэд, но я не хочу go по этому маршруту, если есть «правильный» способ сделать тоньше.

Спасибо!

1 Ответ

0 голосов
/ 29 января 2020

Поговорив с одним из защитников разработчиков, я думаю, что будет справедливо сказать, что я пытался добиться анти-паттерна Ioni c.

Навигация была разработана для добавления в каждый и в.

Таким образом, вы можете просто иметь компоненты навигации и импортировать туда, где вам это нужно.

...