Ionic集成cordova-sms-plugin发送长文本短信返回后工具栏消失问题

我之前在iOS 15上做Ionic项目时，也碰到过类似和Cordova插件交互后布局乱掉的问题，结合你的调试信息（ion-safe-area-top的padding异常变大），给你几个亲测有效的解决思路：

1. 监听应用后台恢复事件，强制重置安全区域 #

问题本质是从系统短信应用回到Ionic时，WebView没有正确重置安全区域的计算。我们可以利用Ionic的resume事件，在应用回到前台时手动修正布局：

import { Platform } from '@ionic/angular';
import { StatusBar } from '@ionic-native/status-bar/ngx';

constructor(private platform: Platform, private statusBar: StatusBar) {
  this.initializeApp();
}

initializeApp() {
  this.platform.ready().then(() => {
    // 监听应用从后台切换回前台的事件
    this.platform.resume.subscribe(() => {
      // 先重置状态栏样式，确保系统状态正确
      this.statusBar.styleDefault();
      
      // 手动触发安全区域padding的重置
      setTimeout(() => {
        const safeAreaTop = document.querySelector('.ion-safe-area-top');
        if (safeAreaTop) {
          // 用Ionic内置的安全区域变量覆盖异常值
          safeAreaTop.style.paddingTop = 'var(--ion-safe-area-top)';
        }
        // 触发窗口resize事件，让Ionic重新计算布局
        window.dispatchEvent(new Event('resize'));
      }, 150);
    });
  });
}

这个方法的核心是在应用恢复时，强制把ion-safe-area-top的padding设回Ionic的默认变量，同时触发resize事件让整个应用重新布局，就能把被顶走的工具栏拉回来。

2. 在短信发送回调中主动刷新布局 #

不管短信发送成功还是失败，只要从系统短信应用回来，就主动触发Ionic的布局刷新：

import { SMS } from '@ionic-native/sms/ngx';

constructor(private sms: SMS) {}

sendLongSMS() {
  const phoneNumber = '目标号码';
  const longMessage = '你的长文本内容';

  this.sms.send(phoneNumber, longMessage)
    .then(() => this.refreshAppLayout())
    .catch(() => this.refreshAppLayout());
}

private refreshAppLayout() {
  // 给内容区域添加临时类触发重绘
  const content = document.querySelector('ion-content');
  if (content) {
    content.classList.add('force-refresh');
    setTimeout(() => content.classList.remove('force-refresh'), 100);
  }
  // 再次触发resize事件确保布局更新
  window.dispatchEvent(new Event('resize'));
}

同时在全局样式里加个简单的触发重绘的样式（可选，但能提升效果）：

.force-refresh {
  opacity: 0.99;
}

3. 升级依赖版本 #

iOS 15的安全区域处理在旧版的cordova-ios或Ionic框架里可能存在兼容性bug，尝试升级到最新稳定版：

• 升级cordova-ios到6.2.0及以上版本
• 升级Ionic到对应大版本的最新稳定版（比如Ionic 5的5.6.x或Ionic 6的最新版）

4. 修改插件原生代码（进阶方案） #

如果上面的方法都无效，可能需要修改cordova-sms-plugin的iOS原生代码，确保在返回应用时通知WebView重新布局。找到插件的iOS实现文件（比如CDVSMS.m），在短信发送完成的回调里添加：

// 发送完成后触发应用激活通知，让WebView重新计算布局
[[NSNotificationCenter defaultCenter] postNotificationName:UIApplicationDidBecomeActiveNotification object:nil];

修改后重新编译插件即可。

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