Nativescript 6.5.2应用iOS15设备ActionBar背景色不显示问题求助

根因说明 #

该问题是iOS15系统的导航栏策略变更导致：iOS15新增了scrollEdgeAppearance导航栏属性，默认滚动到页面顶部时导航栏会自动变为透明，而NativeScript 6.5.2版本发布早于iOS15，内置的ActionBar适配逻辑没有覆盖该新增属性，因此原有背景色配置无法生效，低版本iOS不受影响。

可落地解决方案 #

全局统一适配（推荐） #

在应用入口文件（app.js/main.ts）添加以下代码，全局覆盖iOS15+的导航栏外观规则，所有页面的ActionBar都会生效：

if (global.isIOS) {
    const sysVersion = parseFloat(UIDevice.currentDevice.systemVersion);
    if (sysVersion >= 15) {
        const barAppearance = UINavigationBarAppearance.new();
        // 替换为你实际需要的ActionBar背景色
        barAppearance.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.08, 0.42, 0.83, 1);
        // 按需设置导航栏阴影，不需要阴影设为clearColor即可
        barAppearance.shadowColor = UIColor.clearColor;
        // 同时应用普通状态和滚动边缘状态的外观规则
        UINavigationBar.appearance().standardAppearance = barAppearance;
        UINavigationBar.appearance().scrollEdgeAppearance = barAppearance;
    }
}

如果使用TypeScript开发，仅需给变量补全对应类型声明即可，逻辑完全一致。如果需要使用十六进制色值，自行封装十六进制转UIColor的方法替换颜色生成逻辑即可。

单页面单独适配 #

如果仅需要部分页面的ActionBar生效，可在对应页面的loaded事件回调中添加以下代码：

export function onPageLoaded(args) {
    const page = args.object;
    if (page.ios && parseFloat(UIDevice.currentDevice.systemVersion) >= 15) {
        const navigationBar = page.frame.ios.navigationController.navigationBar;
        const barAppearance = UINavigationBarAppearance.new();
        barAppearance.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.08, 0.42, 0.83, 1);
        navigationBar.standardAppearance = barAppearance;
        navigationBar.scrollEdgeAppearance = barAppearance;
    }
}

自定义背景适配 #

如果你的ActionBar使用了渐变背景、自定义背景图，替换barAppearance的对应配置即可：

• 背景图配置：barAppearance.backgroundImage = 自定义UIImage实例
• 渐变背景可先生成对应尺寸的UIImage再赋值给backgroundImage属性

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