nativescript - 如何使用 NativeScript 在 iOS 和 Android 中更改状态栏的颜色

Question

我正在尝试更改状态栏的颜色以匹配页面其余部分的背景颜色，但它似乎不起作用。

下面是我的 home.css 的样子

Page {
    background-color: #5497CB;
    color:#ecf0f1;
}

这是我的 home.js 的样子

var frameModule = require("ui/frame");

exports.loaded = function(args) {

    var page = args.object;
    var iosFrame = frameModule.topmost().ios;
    if (iosFrame) {
        iosFrame.navBarVisibility = 'never';
    }
};

最后是我的 home.xml

<Page loaded="loaded">
    <StackLayout orientation="vertical">
        <TextField id="email_address" text="{{ email }}" hint="Email Address" keyboardType="email" />
        <TextField secure="true" text="{{ password }}" hint="Password" />

        <Button text="Sign in" tap="signIn"/>
        <Button text="Sign up for Groceries" cssClass="link" tap="register"/>
    </StackLayout>
</Page>

如您所见，没有什么比这更复杂的了，只是试图让状态栏颜色具有白色字体和相同的背景颜色!

有什么建议吗？

Answer 1

您没有使用操作栏，因此您需要将 Page 元素上的 backgroundSpanUnderStatusBar 设置为 true。

<page backgroundSpanUnderStatusBar="true">

文本仍然是黑色的，但是您可以通过将 the whole application 的状态栏更改为 light 来更改它。 .

您可以使用 StatusBar Plugin在 NativeScript 中更好地控制状态栏。