NativeScript 中的状态栏样式

Posted 2023-04-13

【中文标题】NativeScript 中的状态栏样式

【英文标题】：Status bar style in NativeScript

【发布时间】：2020-01-09 05:58:39

【问题描述】：

我正在尝试在此处重现第一页上看到的效果：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/>

【问题讨论】：

您应该将UIViewControllerBasedStatusBarAppearance 设置为true，因为您想更改每个控制器的状态栏外观。

好点。然而，不幸的是，将<false/> 更改为<true/> 似乎并没有改变任何东西。

【参考方案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

【讨论】：

感谢您的贡献。如果我有操作栏，该方法对我有用。但是，如果我删除操作栏，则不会。这一发现与此处的文档一致：docs.nativescript.org/ui/change-status-bar-style-ios.

如果您正在寻找快速解决方案，您可以将基于视图控制器的外观设置为 false，并在加载页面时在共享应用程序实例上设置 stausbar 样式。

【参考方案2】：

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

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

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

【讨论】：

不幸的是，如果操作栏被隐藏，则无法以编程方式设置状态栏样式。我可以给它一个零高度，但这会带来一系列问题（请参阅 github 问题跟踪器链接）。

【参考方案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 将其作为一个 prop 公开，您可以将 'light' 或 'dark' 值传递给它。查看更新后的Vue documentation。