Ionic 2中Tab导航栏在子页面显示并重叠的问题求助

这个问题我之前也碰到过，你用的hide-tabs属性其实是用来隐藏Tabs栏的，并不是控制Tabs页面的Navbar显示，所以子页面加了之后还是会出现重叠的情况。下面给你两个实用的解决办法：

方法一：在Tabs页面监听导航生命周期 #

在Tabs页面的TypeScript文件里，通过监听导航的进入/离开事件，动态控制Navbar的显示和隐藏：

import { NavController, ViewController } from 'ionic-angular';

export class TabsPage {
  tab1Root = Tab1Page; // 替换成你的第一个Tab页面
  tab2Root = Tab2Page; // 替换成你的第二个Tab页面

  constructor(private navCtrl: NavController, private viewCtrl: ViewController) {
    // 当进入Tabs页面时，显示Navbar
    this.navCtrl.viewDidEnter.subscribe(() => {
      if (this.navCtrl.getActive().instance === this) {
        this.viewCtrl.showNavbar(true);
      }
    });

    // 当离开Tabs页面（进入子页面）时，隐藏Navbar
    this.navCtrl.viewDidLeave.subscribe(() => {
      this.viewCtrl.showNavbar(false);
    });
  }
}

方法二：在子页面中控制Tabs的Navbar #

在你的PersonalChatPage里，通过获取父Tabs页面的ViewController，在页面进入/离开时控制Navbar的状态：

import { NavController, ViewController } from 'ionic-angular';

export class PersonalChatPage {
  constructor(private navCtrl: NavController, private viewCtrl: ViewController) {}

  ionViewWillEnter() {
    // 获取父Tabs页面的ViewController，隐藏它的Navbar
    const tabsViewController = this.navCtrl.parent.viewController;
    tabsViewController.showNavbar(false);
  }

  ionViewWillLeave() {
    // 返回时恢复Tabs页面的Navbar显示
    const tabsViewController = this.navCtrl.parent.viewController;
    tabsViewController.showNavbar(true);
  }
}

另外要确认你已经在<ion-tabs>上设置了tabsHideOnSubPages="true"，这个属性会确保子页面里不显示Tabs栏，和上面的Navbar控制配合起来就能彻底解决重叠问题了。

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