angular - 透明 ActionBar：将 NativeScript 与 Angular 结合使用

Question

嗨 Nativescript 社区，

我无法使用 Nativescript 和 Angular 来获得在 ActionBar 上工作的透明度。我找到了像这样的薮主题，但没有人有使用 Angular 的工作示例。有人想向我发送一个使用 Angular 的透明 ActionBar 背景的工作示例吗？最后，我希望能够在滚动时更改透明度。

一些相关主题（但没有工作角度示例）：

1. https://github.com/3rror404/ns-fading-actionbar
2. 向 NativeScript ActionBar 添加视图会中断导航
3. https://www.nativescript.org/blog/how-to-match-a-nativescript-actionbar-s-color-on-ios
4. https://discourse.nativescript.org/t/scrolling-behind-transparent-actionbar/2133
5. https://discourse.nativescript.org/t/tranparent-action-bar/3413
6. https://github.com/NativeScript/NativeScript/issues/2669

问候，

木材

Answer 1

这是 iOS 的示例。

import { topmost, Color } from "tns-core-modules/ui/frame";

declare let UIBarMetrics, UIBarStyle, UIImage;

makeActionBarTransparent() : void {
    let navbar = topmost().ios.controller.navigationBar;
    navbar.barStyle = UIBarStyle.BlackTranslucent;
    navbar.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
    navbar.shadowImage = UIImage.new();
    navbar.translucent = true;
    navbar.tintColor = new Color('white').ios;
}

但是似乎当您在一个页面中修改操作栏时，其他页面中的操作栏也会被修改。如果这不是您想要的行为，您可以隐藏操作栏并使用自定义元素。例如，创建一个带有操作图标的透明堆栈布局。

您可以像这样隐藏操作栏：

import { Page } from "tns-core-modules/ui/page";

constructor(
    private page : Page
) {}

ngAfterViewInit() : void {
    this.page.actionBarHidden = true;
}

Answer 2

您可以将任何东西用作操作栏。将标签放在网格布局的顶部 7% 上，然后就可以了。我不知道操作栏工具是否有效，但您可以尝试一下。