Question

所以我找到了这个npm包： https://www.npmjs.com/package/nativescript-statusbar

但我无法使用Page元素，因为我正在使用angular和typescript。

我已经做到了：

this.page.backgroundSpanUnderStatusBar= true;

但我的背景颜色是黑色。

我需要来自iOS的灯光状态栏。

现在可以吗？

任何帮助非常感谢！

Answer 1

使用nativescript中的angular2，您只需在组件中注册和元素：

registerElement("StatusBar", () => require("nativescript-statusbar").StatusBar);

在您的视图中使用您创建的标记，在这种情况下使用StatusBar：

<StatusBar ios:barStyle="light" android:barStyle="red"></StatusBar>

Answer 2

您可以尝试以下

import {Component } from "angular2/core";
import frameModule = require("ui/frame");

@Component({
    selector: "my-app",
    template: `
<StackLayout orientation="vertical">
    <Label [text]="message" class="title" (tap)="message = 'OHAI'"></Label>
</StackLayout>
`,
})
export class AppComponent {
    
    ngOnInit() {
        var page = frameModule.topmost().currentPage;

        page.backgroundSpanUnderStatusBar = true;
        if(page.ios){ 
            page.ios.navBarVisibility = "always";
            var controller = page.ios.controller; 
            var navigationBar = controller.navigationBar; 
            navigationBar.barStyle = 2; // different styles from 0 to 3
        }
    }
}

有关样式化iOS导航栏样式的更多信息，请参阅本教程here

Answer 3

之前我曾使用过“nativescript-statusbar＆＃39;用于更改Angular / NativeScript应用程序中状态栏背景的包。但它会导致横向模式状态栏出现问题。

所以我找到了一个更好的解决方案：

import { Page } from "ui/page";

@Component({...}) 
export class YourAnyComponent {
    public constructor(private page: Page) {}
    ngOnInit() {
        this.page.backgroundColor = '#2c303a';
        this.page.backgroundSpanUnderStatusBar = true;
        this.page.actionBarHidden = false; // if you want to show only statusbar or - true if you want to show both stutus bar and action bar
    }
}

如何使用nativescript，angular2和typescript更改iOS状态栏颜色？

3 个答案: