3

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

下面是我的 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>

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

任何指针？

它现在的样子的例子。

4

6 回答 6

3

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

<page backgroundSpanUnderStatusBar="true">

文本仍然是黑色的，但您可以通过将状态栏更改light为整个应用程序来更改它。

您可以使用StatusBar 插件对 NativeScript 中的状态栏进行更多控制。

于 2016-03-20T01:22:14.307 回答
1

这仅适用于安卓。

您可以更改 primary 和 primaryDark 颜色：

<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
  <item name="colorPrimary">@color/ns_primary</item>          <- Here
  <item name="colorPrimaryDark">@color/ns_primaryDark</item>  <- And here
  <item name="colorAccent">@color/ns_accent</item>
</style>

这个答案解决了我的问题。

于 2016-01-24T20:06:25.950 回答
1

状态栏（时间、电池指示器）从导航栏（返回、页面标题等）继承其背景颜色。但是，如果您隐藏导航栏，则状态栏会改为从窗口背景颜色继承颜色。因此，如果您想在隐藏导航栏的情况下更改状态栏的颜色，则必须设置窗口背景颜色。

这是隐藏导航栏并将状态栏背景设置为灰色的示例。

var iosFrame = frameModule.topmost().ios;
if (iosFrame) {
    iosFrame.navBarVisibility = 'never';
    iosFrame.controller.view.window.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.945, 0.953, 0.953, 1);
}

（colorWithRedGreenBlueAlpha想要一个介于0和之间的数字，其中 1 与模式中1的相同。所以基本上除以）255rgb(255, 255, 255)255

于 2015-10-22T08:53:32.213 回答
0

对于安卓来说，就是这么简单。只需在下面的行中复制粘贴E:\projects\appname\app\App_Resources\Android\src\main\res\values\styles.xml

<item name="android:statusBarColor">@color/ns_primaryDark</item>
<item name="android:windowLightStatusBar">true</item>

把它放在你想要的任何主题下，通常我把它放在下面AppThemeBase

于 2020-11-11T08:50:46.980 回答
0 
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
    }
}
于 2017-10-19T10:42:10.580 回答
0

要更改 Android 的背景颜色，请使用：

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

@Component({...}) 
export class YourAnyComponent {
    public constructor(private page: Page) {}
    ngOnInit() {
       this.page.androidStatusBarBackground = new Color("#0077cc");
    }
}
于 2020-06-13T14:10:54.360 回答