Ionic安卓软导航栏与应用界面重叠问题及解决方案

问题描述 #

在部分安卓设备上，系统软导航栏会与Ionic应用页面发生重叠。此前已通过添加状态栏插件并在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" />

将resizeOnFullScreen设置为false后，系统会自动调整应用页面的布局，避免与软导航栏发生重叠。

内容的提问来源于stack exchange，提问作者Pratik Solanki