Nativescript iOS15 ActionBar滚动才显示背景色 无需升级版本如何修复

适配方案（兼容Nativescript 6.x版本，无需升级依赖） #

根因说明 #

iOS15新增UINavigationBar的scrollEdgeAppearance配置，默认值为透明样式，旧版本Nativescript未适配该属性，导致静态页面下ActionBar自定义背景不生效，滚动时才会触发默认样式显示。

步骤1：全局配置导航栏样式 #

在应用入口文件（如app.component.ts或app.module.ts的构造函数中）添加如下iOS专属适配代码：

import { isIOS, Device } from "tns-core-modules/platform";
import * as utils from "tns-core-modules/utils/utils";

// 应用初始化时执行
if (isIOS && parseFloat(Device.osVersion) >= 15) {
  // 绕过旧版类型定义缺失问题
  declare var UINavigationBarAppearance: any;
  const navBarAppearance = UINavigationBarAppearance.new();
  
  // 替换为你项目中$ab-background对应的十六进制色值
  navBarAppearance.backgroundColor = utils.ios.getUIColor("#1976D2"); 
  // 配置标题文字颜色为白色
  navBarAppearance.titleTextAttributes = {
    [NSForegroundColorAttributeName]: UIColor.whiteColor
  };

  // 同时配置静态和滚动状态的导航栏样式
  const globalNavBar = UINavigationBar.appearance();
  globalNavBar.standardAppearance = navBarAppearance;
  globalNavBar.scrollEdgeAppearance = navBarAppearance;
}

步骤2：CSS样式补充 #

在全局样式文件中修改ActionBar配置，禁用默认毛玻璃效果避免样式冲突：

ActionBar {
  background-color: $ab-background;
  color: white;
  text-align: center;
  backdrop-filter: unset; /* 新增该行 */
  
  Label{
    font-size: 12;
  }
}

可选：单页适配（仅个别页面异常时使用） #

若部分页面仍存在样式问题，在对应页面的组件代码中添加单独配置：

import { Page } from "tns-core-modules/ui/page";
import { isIOS, Device } from "tns-core-modules/platform";
import * as utils from "tns-core-modules/utils/utils";

constructor(private page: Page) {}

ngOnInit() {
  if (isIOS && parseFloat(Device.osVersion) >= 15) {
    declare var UINavigationBarAppearance: any;
    const currentNavBar = this.page.frame.ios.controller.navigationBar;
    const appearance = UINavigationBarAppearance.new();
    appearance.backgroundColor = utils.ios.getUIColor("#你的蓝色色值");
    appearance.titleTextAttributes = {[NSForegroundColorAttributeName]: UIColor.whiteColor};
    currentNavBar.standardAppearance = appearance;
    currentNavBar.scrollEdgeAppearance = appearance;
  }
}

注意事项 #

• 无需升级任何现有依赖，完全兼容你当前使用的tns-core-modules 6.5.x版本
• 全局配置一次即可覆盖所有页面的ActionBar样式，无需修改现有业务页面代码
• 若编译时报UINavigationBarAppearance相关类型错误，在项目根目录的references.d.ts文件中添加declare var UINavigationBarAppearance: any;即可

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