透明ActionBar:将NativeScript与Angular结合使用

时间:2018-03-18 20:15:13

标签: angular nativescript nativescript-telerik-ui nativescript-angular

您好Nativescript社区,

我无法使用Nativescript与Angular结合使用ActionBar的透明度。我找到了像这样的serval主题,但没有人使用Angular有一个工作示例。有人想使用Angular向我发送透明ActionBar背景的工作示例吗? 最后,我希望能够在滚动时更改透明度。

一些相关主题(但没有工作角度示例):

  1. https://github.com/3rror404/ns-fading-actionbar
  2. Adding view to NativeScript ActionBar breaks navigation
  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
  7. 此致

    木材

2 个答案:

答案 0 :(得分:0)

您可以将任何内容用作操作栏。将标签放在网格布局的顶部7%上,即可开始。我不知道是否可以使用Actionbar工具,但是您可以尝试一下。

答案 1 :(得分:0)

这是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;
}