Ionic 3集成AdmobFree：关闭邮件分享弹窗后ion-tabs消失

我之前也碰到过类似的场景——iOS应用在完成分享操作后UI布局错乱，第三方插件元素和Ionic原生组件的层级冲突是常见诱因。针对你的情况，分享操作（比如调用系统邮件分享）会让应用短暂进入后台，恢复后Admob插件可能没正确重新计算横幅位置，或者Ionic Tabs的布局没及时刷新，最终导致Tabs被遮挡。给你几个可行的解决方案：

1. 监听应用恢复事件，重新配置Admob横幅 #

当应用从分享界面返回时会触发resume事件，我们可以在这个时机重新初始化或调整广告横幅的配置，确保overlap: false参数生效：

// 在app.component.ts中实现
import { Platform } from 'ionic-angular';

constructor(private platform: Platform) {
  this.platform.resume.subscribe(() => {
    // 确保Admob对象已加载
    if (window['admob']) {
      const banner = window['admob'].Banner;
      // 重新应用核心配置，重点保留overlap: false
      banner.config({
        id: '你的广告单元ID',
        overlap: false,
        position: banner.AD_POSITION.BOTTOM_CENTER,
        // 其他你需要的自定义配置
      });
      // 重新显示横幅（若已显示，此操作会自动调整位置）
      banner.show();
    }
  });
}

2. 调整Tabs层级，确保显示在广告上方 #

部分版本的Admob插件会默认给横幅设置较高的z-index，我们可以手动给Tabs设置更高的层级，强制它显示在广告上方：

// 在app.scss中添加样式
ion-tabs {
  z-index: 10 !important; // 数值只需高于Admob横幅默认的z-index即可，插件默认一般在5-9区间
}

或者反过来，在配置Admob时主动降低广告的z-index：

banner.config({
  // 其他配置项
  zIndex: 5 // 设置为低于Tabs的z-index值
});

3. 强制刷新Tabs的布局 #

分享返回后，Ionic的Tabs组件可能没有自动重新计算布局，我们可以手动触发它的resize方法：

首先在模板中给Tabs添加引用标识：

<ion-tabs #mainTabs>
  <!-- 你的Tab页面配置内容 -->
</ion-tabs>

然后在代码中监听resume事件并执行刷新：

import { Tabs } from 'ionic-angular';
import { ViewChild } from '@angular/core';

// 组件类内定义引用
@ViewChild('mainTabs') mainTabs: Tabs;

constructor(private platform: Platform) {
  this.platform.resume.subscribe(() => {
    // 延迟执行，确保页面完全恢复状态
    setTimeout(() => {
      if (this.mainTabs) {
        this.mainTabs.resize();
      }
    }, 300);
  });
}

4. 重置Admob横幅状态 #

如果以上方法都无效，可以尝试在resume事件中先隐藏横幅再重新显示，强制触发布局重置：

this.platform.resume.subscribe(() => {
  if (window['admob']) {
    const banner = window['admob'].Banner;
    banner.hide().then(() => {
      banner.show();
    });
  }
});

这些方法的核心思路是确保应用从后台恢复后，Admob横幅和Ionic Tabs的布局都能正确重置，应该能解决你遇到的问题。

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