如何防止 Ionic/React fab 按钮随键盘移动？

Question

我的 App.tsx 文件中有一个 fab 按钮。它覆盖在我的底部选项卡栏的顶部，但实际上不在选项卡栏内部，因为如果我将其放入 IonTab 中，非选项卡按钮似乎会消失。

目前，当我打开键盘打字时，fab 按钮会随键盘一起向上移动。我希望它隐藏在键盘后面/根本不移动。

我尝试过position:absolute，但它仍然向上移动。这是我当前的代码：

<IonApp>
    <IonContent>
        <IonPage>
            <IonTab>.....</IonTab>
            <IonFab vertical="bottom" horizontal="center" slot="bottom">
                <IonFabButton mode="ios" onClick={() => { scanCode() }}>
                    <IonIcon style={iconStyle} icon={camera}></IonIcon>
                </IonFabButton>
            </IonFab>
        </IonPage>
    </IonContent
</IonApp>

Answer 1

尝试将

<IonPage>

放在

<IonContent>

之外

像这样：

<IonApp>
  <IonPage>
    <IonContent>
      ...
    </IonContent>
  </IonPage>
</IonApp>

Answer 2

你想通了吗？