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

Question

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

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

我已经做了这个：

this.page.backgroundSpanUnderStatusBar= true;

但是我的背景颜色是黑色。

我需要 iOS 的灯光状态栏。

现在可以吗？

非常感谢任何帮助！

Answer 1

您可以尝试以下方法

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 2

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

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

并且在您的视图中使用您创建的标签，在这种情况下 StatusBar:

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

Answer 3

之前我使用 'nativescript-statusbar' 包来更改我的 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 状态栏颜色？

How can I change the iOS status bar color with nativescript, angular2 and typescript?

angularjs

typescript

nativescript