reactjs - 元素位于屏幕之外

Question

我正在使用 Ionic 4 并设置了 React。

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 中的元素和样式面板时，我注意到该元素遵循以下规则:

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

这解释了我从按钮的几个像素中获得的 View 。这是 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>
  );