如何使用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中狀態欄的顏色

回答

相關問題