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; };

- Dilar

Answer 1

通过设置Page的actionBarHidden属性，可以显式地控制ActionBar的可见性，如下所示：

import {Page} from "ui/page";

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

- Diego Melo

---

在早期版本中，根始终是一个框架(Frame)，因此默认情况下会有一个页面(Page)。但是在最新的Nativescript版本中，这种方式不再适用。在最新版本中，您可以定义灵活的根组件和任意数量的框架(page-router-outlet)。因此，在应用程序组件内将不会创建默认的Frame/Page。Page只能被注入到加载在page-router-outlet中的组件中。 - Ahmer Ali Ahsan

Answer 2

最终我找到了如何移除ActionBar的答案。在xml文件中标签“ Page ”内添加actionBarHidden = "true"即可。

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

- Dilar

---

有其他的方法吗？我不使用页面标签。 - Ahmed Elgendy

如果您使用的是Angular，则可以使用指令。我已经发布了一个答案，展示了如何使用它。 - Narendra

有其他的方法吗？我不使用页面标签或Angular。 - Seph Reed

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;
    }
}

- Bienvenido David

---

在 Android 和 iOS 上可以工作，但在尝试在浏览器中运行 Angular 应用程序时会崩溃。 - Alex Bean

Answer 4

在您的[app.component.html]文件中添加[actionBarVisibility="never"]。 在我的项目中使用良好。

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

- Sambad

---

这个答案应该排得更靠前。使用较新版本的Nativescript并更多地使用page-router-outlet，这将变得简单、快速和干净。谢谢。 - wareisjared

Answer 5

如果你正在使用 Angular，并且你的 HTML 中没有使用 page，或者你正在使用模块的惰性加载，或者你有多个 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;
    }
}

并在需要隐藏actionbar的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
],

- Narendra

---

一种非常优雅的解决方案，利用了Angular的优势。 - Pierre R-A

这个答案对于代码共享项目至关重要（也是唯一有效的）。谢谢！ - ZX9

不确定为什么上面的所有解决方案对我都有效 - 但是网格的第一行超出了屏幕。 - Ricky Levi

Answer 6

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

1. XML markup: just add 'actionBarHidden="true"' to your page markup. i.e<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;
}

- Chromonav

Answer 7

ActionBar {
  height: 0;
}

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

- Alexis Tamariz

---

可能有助于添加一两段说明海报如何使用此代码来解决他/她的问题。并可能解释为什么他/她发布的代码不起作用。 - ctt

Answer 8

import { Component, OnInit } from "@angular/core";
import { Page } from "@nativescript/core";

@Component({
  selector: "ns-items",
  templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {

  constructor(private page: Page) { 
  }

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

- EliasBG