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

我试图更改状态栏的颜色以匹配页面背景色的其余部分，并且它似乎无法正常工作。如何使用NativeScript更改iOS和Android中状态栏的颜色

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

正如你看不到任何复杂的东西，只是试图让状态栏颜色有一个白色的字体和相同的背景色！

任何指针？

来源

2015-10-21 BaconJuice

这将成为NativeScript 1.5.0的一部分。在此版本发布之前，您可以跟上这个问题的讨论[https://github.com/NativeScript/NativeScript/issues/767]。 –

@NeliChakarova我正在尝试关注此链接http://developer.telerik.com/featured/customizing-ios-navigation-bar-status-bar-nativescript/，但很高兴知道它将在1.5版中推出！ – BaconJuice

我想设置页面背景颜色和状态栏不继承颜色。我将Page.backgroundSpanUnderStatusBarProperty设置为true，没有任何反应。仍然得到一个灰色的状态栏（我试图将其设置为红色）。难道我做错了什么？ –

状态栏（时间，电池指示器）继承了导航栏（后退，页面标题等），它的背景色。但是，如果隐藏导航栏，则状态栏将继承来自窗口背景颜色的颜色。因此，如果您想要隐藏导航栏来更改状态栏的颜色，则必须设置窗口背景颜色。

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

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相同的rgb(255, 255, 255)模式255。所以基本上与255分）

来源

2015-10-22 08:53:32

这有点作用！现在有什么方法可以将字体颜色指定为白色？ – BaconJuice

篦子人..节省很多时间。 – gamal

这只适用于机器人。

您可以更改主要和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>

This answer解决我的问题。

来源

2016-01-24 20:06:25

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

<page backgroundSpanUnderStatusBar="true">

文本将仍然是黑色的，但你可以通过改变状态栏light为the whole application改变。

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

来源

2016-03-20 01:22:14

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-19 10:42:10

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

回答

相关问题