如何从应用程序中删除操作栏?

时间:2019-01-24 10:19:07

标签: angular nativescript nativescript-angular

我正在尝试从我在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); 
}

3 个答案:

答案 0 :(得分: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;
    }
    ...
}

注意:此代码仅适用于带角度的本机脚本,该想法适用于原始本机脚本,但代码不同

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

在页面路由器插座上设置actionBarVisibility就像一个超级按钮。谢谢,马丁!