Question

我正在使用带有React设置的Ionic 4。

ionic start myapp --type=react

我正在尝试向应用程序中添加一个简单的Fab按钮，将其定位到屏幕的右下角：

<IonFab vertical="bottom" horizontal="end" slot="fixed">
  <IonFabButton onClick={()=>{props.history.push("/add")}}>
    <IonIcon icon={add} />
  </IonFabButton>
</IonFab>

但是，这导致按钮在大部分不在屏幕上时才稍微可见。

当我查看devTools中的 elements＆styles 面板时，我注意到该元素具有以下规则：

:host(.fab-vertical-bottom) {
    bottom: 10px;
}

这解释了我仅获得按钮的几个像素的视图。这是Ionic 4的问题，还是我在这里做错了？

完整组件：

import { IonContent, IonHeader, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonButtons, IonBackButton } from '@ionic/react';
import React from 'react';
import { RouteComponentProps } from 'react-router';

/* Icons */
import {add} from 'ionicons/icons';

const AddItem: React.FunctionComponent<RouteComponentProps> = (props) => {
  return (
    <>
        <IonHeader>
          <IonToolbar>
            <IonButtons slot="start" >
              <IonBackButton defaultHref="/home"/>
            </IonButtons>
            <IonTitle>Add Item</IonTitle>
          </IonToolbar>
        </IonHeader>
      <IonContent className="ion-padding">
          <h1>blablablabla</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus soluta illum sit asperiores, debitis quia magnam non pariatur dignissimos necessitatibus labore ratione obcaecati nesciunt nam accusantium sequi! Doloribus, nulla ipsam.
          </p>
          <IonFab vertical="bottom" horizontal="end" slot="fixed">
            <IonFabButton onClick={()=>{props.history.push("/add")}}>
              <IonIcon icon={add} />
            </IonFabButton>
          </IonFab>
      </IonContent>
    </>
  );
};

export default AddItem;

Answer 1

感谢您分享您的组件，并努力复制。

所以这似乎是一个错误，原因是fab的位移是由IonHeader元素引起的。但是，有一些解决方法，此错误的issue不久前已通过非hacky解决方案关闭。首先，您实际上可以将fab设置为固定元素

ion-fab {
  position: fixed;
}

我不希望这样做，并且通常会受到警告，但是在您的用例中，由于您的元素与DOM的常规流分开而实际上是有意义的。

或者，您可以将内容包装在IonPage元素中，这与框架有关，这更有意义。有点奇怪，因为我看不到文档中引用的IonPage元素，就像您处理IonContent之类的其他结构组件一样

return (
    <IonPage>
       <IonHeader>
          <IonToolbar>
            ...
          </IonToolbar>
        </IonHeader>
      <IonContent>
        ...
        <IonFab vertical="bottom" horizontal="center" slot="fixed">
          <IonFabButton>
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
    </IonPage>
  );

<IonFab>元素位于屏幕外部

1 个答案: