如何从应用程序中删除操作栏？答案

【问题标题】：How do I remove the action bar from the app?如何从应用程序中删除操作栏？
【发布时间】：2019-01-24 10:19:07
【问题描述】：

我正在尝试从使用 NativeScript 开发的应用程序中删除操作栏，我删除了与操作栏相关的所有代码（html 和 css 代码），但它继续出现在应用程序上。

HTML：

<ScrollView>
    <StackLayout class="page p-t-15">

            <Image src="~/app/img/logo.png" ></Image>
            <Label class="m-t-10 text-center" text="Login" label.Alignment = "top";></Label>

        <TextField class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalization="none"
            [(ngModel)]="email"></TextField>

        <TextField class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Password" secure="true" autocorrect="false" autocapitalization="none"
            [(ngModel)]="password"></TextField>

        <Button class="btn btn-primary" text="SIGN IN" (tap)="onSigninButtonTap()"></Button>

        <Label class="m-t-10 text-center" text="______ or ______"></Label>

        <Button class="btn btn-outline" (tap)="onLoginWithSocialProviderButtonTap()" text="Log in with Social Provider"></Button>

        <Label class="m-t-10 m-b-10 m-l-15 m-r-15" text="Forgot password?" (tap)="onForgotPasswordTap()"></Label>

        <Label class="m-t-10 m-b-10 m-l-15 m-r-15" text="Não tem conta?" (tap)="onNaoTemContaTap()"></Label>
        <Button class="btn btn-primary" text="Sign UP" [nsRouterLink]="['/browse']" pageTransition="slide" clearHistory="true"></Button>
    </StackLayout>
</ScrollView>

CSS：

    StackLayout {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(#000000,#439B9B , #000000); 
}

【问题讨论】：

不确定哪一部分是操作栏，但您可以添加一些 CSS 以完全隐藏它，例如 display: none;
@Protozoid 你不能在 nativescript 中做到这一点，至少不能用于操作栏

标签： angular nativescript nativescript-angular

【解决方案1】：

使用 NativeScript 5.0，您在 Frame 组件上有一个新属性 actionBarVisibility。您可以将其设置为never，您将永远不会在此Frame 中导航的页面中看到ActionBar。它消除了在每个页面上手动隐藏ActionBar 的需要。

在 Angular 中为 page-router-outlet 组件公开了相同的属性。

【讨论】：

@mast3rd3mon 如果您对该属性有任何疑问，请登录 github。从 6.2.0 开始，它就在 nativescript-angular 包中。这是更新日志 - github.com/NativeScript/nativescript-angular/blob/master/…
我的房产没有问题？我只是指出您的答案不是角度的，而我的答案是
我不明白你在说什么。对于 Angular，您将属性设置为 page-router-outlet。措辞有问题吗？
对于角度，解决方案是我在我的答案中发布的。除非它被改变，否则角度不使用“框架”
它确实在引擎盖下使用了“框架”。事实上，page-router-outlet 是一个“框架”，这就是它具有此属性的原因。

【解决方案2】：

在要删除操作栏的页面中，添加import { Page } from "tns-core-modules/ui/page";，然后在构造函数中添加private page: Page。然后，这允许您执行this.page.actionBarHidden = true;。

有点像下面这样：

import { Page } from "tns-core-modules/ui/page";
...
export class ... {
    constructor(private page: Page) {
        this.page.actionBarHidden = true;
    }
    ...
}

注意：此代码仅适用于带有角度的nativescript，该想法适用于vanilla nativescript，但代码不同

【讨论】：

使用这种方法，您必须在每个页面上执行此操作，这可能会变得乏味。在page-router-outlet 组件上使用actionBarVisibility 属性会更好。
实际上，有几种方法可以在每个页面上禁用它。您可以更改应用程序的活动类型以删除操作栏（您更改项目构建所针对的应用程序类型）并且您可以通过在某个位置使用上面的代码从每个页面隐藏操作栏但不幸的是我不记得在哪里跨度>
这种方法的另一个缺陷是您在事后动态隐藏操作栏。这意味着操作栏最初是显示的，当 Angular 组件被实例化时，它会隐藏它。这会导致许多视觉故障，尤其是在旧设备上。 actionBarVisibility 属性告诉导航控制器永远不要显示操作栏。从性能和用户体验的角度来看，这更好。

【解决方案3】：

在 page-router-outlet 上设置 actionBarVisibility 就像一个魅力。谢谢，马丁！

【讨论】：