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アクション バーを使用していないため、Page要素の をに設定する必要がありますtrue。

<page backgroundSpanUnderStatusBar="true">

lightテキストは黒のままですが、ステータスバーをアプリケーション全体に変更することで変更できます。

StatusBar プラグインを使用して、NativeScript のステータス バーをより詳細に制御できます。

于 2016-03-20T01:22:14.307 に答える
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の間の数が必要です。ここで、1 はパターンと同じです。したがって、基本的には で割ります)01255rgb(255, 255, 255)255

于 2015-10-22T08:53:32.213 に答える
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 に答える