IONIC Android导航栏重叠应用屏幕

Question

某些手机上的Android软导航栏会覆盖应用程序页面。 我之前遇到过类似的状态栏问题（在Android上顶部的栏），通过添加插件并在我的app.component.js中添加一行代码解决了该问题。

this.statusBar.overlaysWebView(false);

添加了cordova-plugin-navigationbar后，可用的解决方案是隐藏导航栏。

import { NavigationBar } from '@ionic-native/navigation-bar/ngx';

constructor(private navigationBar: NavigationBar) { }

...

let autoHide: boolean = true;
this.navigationBar.setUp(autoHide);

有没有什么办法可以停止重叠？

我使用了状态栏插件，使用插件时请确保在您的config.xml文件中将<preference name="resizeOnFullScreen" value="false" />设置为false。这应该可以解决问题。

- Pratik Solanki

---

我在安卓13上遇到了这个问题。根据你的描述，我不是很清楚你是否已经解决了这个问题，还是仍然存在。能否请你澄清一下？我也在寻找解决这个问题的方法。 - Alex Predescu

我已经解决了这个问题，在使用状态栏插件时，可以在config.xml中添加<preference name="resizeOnFullScreen" value="false" />。我花了很多时间寻找解决方案，但这对我有效。 - Pratik Solanki

然而，它只有在应用程序初始化后执行以下操作才能一致地工作：

1. this.statusBar.overlaysWebView(false);
2. 等待（超时）
3. this.statusBar.overlaysWebView(true);

- Alex Predescu

是的，您需要在上述建议的解决方案中使用“this.statusBar.overlaysWebView(false);”才能正常工作。 - Pratik Solanki

Answer 1

Ionic >= 6

错误发生是因为 StatusBar.setOverlaysWebView({ overlay: true }) 逻辑。

避免使用 setOverlaysWebView

缺点：内容在打开键盘时不会自适应。

// app.component.ts
StatusBar.setOverlaysWebView({ overlay: false }) // Default value, shall be safely removed

超时

缺点：肮脏的解决方法，可能无法正常工作（待测试）

// app.component.ts
setTimeout(() => {
  StatusBar.setOverlaysWebView({ overlay: true })
}, 100)

Ionic <= 5

避免使用overlaysWebView

缺点：当键盘打开时，内容不会自适应

// config.xml
<preference name="resizeOnFullScreen" value="false" />

// app.component.ts
this.statusBar.overlaysWebView(false);

相关问题

https://github.com/ionic-team/capacitor/issues/6423

- Raphaël Balet