Nativescript android删除操作栏

Question

我正在尝试使用Nativescript开发Android应用程序并尝试删除Action Bar（顶部栏中带有＆＃34; testns＆＃34; title），但不知道如何操作。 我使用下面的代码，但没有工作。目前使用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

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

<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

如果您使用的是angular语言，而不在HTML中使用page，或者使用模块的延迟加载，或者您有多个page-router-outlet，则可以利用directives。

创建一个新指令，例如hideActionBar.ts 从“ @ angular / core”导入{指令}； 从'tns-core-modules / ui / page / 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>

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

declarations: [
 AppComponent,
 MyDirective
],

Answer 5

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

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

Answer 6

有两种方法可以实现这一目标：

1. XML标记：只需添加＆＃39; actionBarHidden =＆＃34; true＆＃34;＆＃39;到你的页面标记。 即<Page loaded="pageLoaded" actionBarHidden="true"> </Page>

2.                   

   <StackLayout verticalAlignment="middle"> 
       <Button text="{{ abHidden ? 'Show ActionBar' : 'Hide ActionBar' }}" tap="onTap" textWrap="true" class="fa" />
   </StackLayout>
   

并在你的.ts

export function onNavigatingTo(args: EventData) {
    const page = <Page>args.object;
    const vm = new Observable();
    vm.set("abHidden", value);
    page.bindingContext = vm;
}

Answer 7

ActionBar {
  height: 0;
}

<ActionBar [title]="appTitle">
</ActionBar>

Answer 8

从“@angular/core”导入 { Component, OnInit }; 从“@nativescript/core”导入{页面}；

@组件({ 选择器：“ns-items”， templateUrl: "./items.component.html", }) 导出类 ItemsComponent 实现 OnInit {

constructor(
    private page: Page
    ) { 
    }

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

}