Question

我正在尝试重现首页https://github.com/sebawita/starships上看到的效果，其中有一个状态栏，内容浅，没有操作栏。

我一直在尝试此处指定的说明：https://github.com/NativeScript/nativescript-angular/issues/1779#issuecomment-522586849

我使用的是NativeScript Vue，而不是使用angular，但是我认为这并不重要。这是我的组件代码：

<template>
    <Page
        class="page"
        ref="page"
        statusBarStyle="light"
        @loaded="onPageLoaded()">
        <GridLayout rows="*, 60, 60, 20, 60, *">
            <Label row="0" textWrap="true" class="header" text="Starship Service" />
            <TextField
                id="emailField"
                hint="Email"
                keyboardType="email"
                returnKeyType="next"
                autocorrect="false"
                row="1"
                class="textfield"
                ios.clearButtonMode="1"
                ref="field1" />

            <TextField
                row="2"
                secure="true"
                hint="Password"
                returnKeyType="send"
                class="textfield" />
            <Button row="4" text="Log in" />
        </GridLayout>
    </Page>
</template>

<script>
import { topmost } from "tns-core-modules/ui/frame";
import { isIOS } from "tns-core-modules/platform";

export default {
    methods: {
        onPageLoaded: function(args) {
            console.log('page loaded');

            if (isIOS) {
                Object.defineProperty(UIViewController.prototype, 'preferredStatusBarStyle', {
                    get: function () {
                        return this._preferredStatusBarStyle || UIStatusBarStyle.Default;
                    },
                    enumerable: true,
                    configurable: true
                });
                let controller = topmost().ios.controller;
                controller._preferredStatusBarStyle = UIStatusBarStyle.Default;
                controller.setNeedsStatusBarAppearanceUpdate();
            }

            console.log("page loaded done");
        },
    },
    computed: {
        message() {
            return "Welcome to the first version of the starship app :-)";
        }
    }
};
</script>

<style scoped lang="scss">
    .page {
        background-image: url("https://raw.githubusercontent.com/sebawita/starships/master/icons/space-bg.jpg?raw=true");
        color: #fff; 
    }
</style>

我的Info.plist文件中有这个文件：

    <key>UIStatusBarStyle</key>
    <string>UIStatusBarStyleLightContent</string>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>

Answer 1

您可以在页面加载的事件中本地设置状态栏样式

HTML

<Page class="page" @loaded="onPageLoaded">

JS

onPageLoaded: function(args) {
  let controller = args.object.frame.ios.controller;
  controller.navigationBar.barStyle = 0; // `0` for Black or `1` for Light
}

Answer 2

您还可以隐藏每个组件的操作栏。

import { Page } from 'tns-core-modules/ui/page/page';

constructor(
      private page: Page) {
      page.actionBarHidden = true;
}

Answer 3

就像在其他评论中得到答复一样，您需要确保您的Info.plist文件具有此条目：

<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

所需的关键代码已在以下NativeScript 6.4或6.5中添加： https://github.com/NativeScript/NativeScript/pull/8241/files

这是NativeScript Page对象上的iOS preferredStatusBarStyle()功能。 NativeScript-Vue将其公开为道具，您可以将其传递给“亮”或“暗”值。请参阅更新后的Vue documentation。

NativeScript中的状态栏样式

3 个答案: