Nativescript android删除操作栏

Question

我正在尝试使用Nativescript开发Android应用程序并尝试删除Action Bar(带有"testns"标题的顶部栏),但不知道如何.我使用下面的代码,但没有工作.目前使用tns v.1.3.0

var frameModule = require("ui/frame"); exports.pageLoaded = function(){ var topmost = frameModule.topmost(); topmost.android.showActionBar = false; };

Answer 1

您可以通过设置Page的actionBarHidden属性来显式控制ActionBar的可见性,请看:

import {Page} from "ui/page";

export class AppComponent {
    constructor(page: Page) {
        page.actionBarHidden = true;
    }
}

Answer 2

最后,我找到了如何删除操作栏的答案.通过actionBarHidden = "true"在xml文件中添加内部标记页面:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded" actionBarHidden="true">
</Page>

Answer 3

这是隐藏NativeScript Angular TypeScript组件中ActionBar的代码.

import { Component, OnInit } from "@angular/core";
import { Page } from "tns-core-modules/ui/page";

export class AppComponent implements OnInit {

    constructor(private page: Page) {
    }

    ngOnInit(): void {
        this.page.actionBarHidden = true;
    }
}

Answer 4

<page-router-outlet actionBarVisibility="never"></page-router-outlet>

在您的 [app.component.html] 文件中添加 [actionBarVisibility="never"] 。它在我的项目中工作正常。

Answer 5

如果您使用的是angular而不page在html中使用，或使用延迟加载模块或有多个模块page-router-outlet，可以利用指令。

创建一个新指令：

hideActionBar.ts

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

@Directive({
    selector: '[hideActionBar]'
})
export class HideActionBarDirective {
    constructor(private page: Page) {
        this.page.actionBarHidden = true;
    }
}

并将此指令用于要隐藏操作栏的html。

SecondPage.html

<GridLayout tkExampleTitle tkToggleNavButton rows="auto,*" hideActionBar>
 ...// other html goes here
</GridLayout>

PS不要忘了声明它NgModule作为指令是declarables。这对于代码共享项目非常有用，因为您将在ngmodule.tns.ts中声明它，并且不会为Web项目进行编译。

declarations: [
 AppComponent,
 MyDirective
],