Nativescript android删除操作栏答案

【问题标题】：Nativescript android remove action barNativescript android删除操作栏
【发布时间】：2016-01-27 15:53:06
【问题描述】：

我正在尝试使用 Nativescript 开发 android 应用程序并尝试删除操作栏（带有“testns”标题的顶部栏），但不知道如何。我正在使用下面的代码但不工作。目前使用 tns v.1.3.0

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

【问题讨论】：

标签： android nativescript

【解决方案1】：

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

import {Page} from "ui/page";

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

【讨论】：

在早期版本中，root 始终是 Frame，因此默认情况下会有 Page。现在这不适用于最新版本的 nativescript。使用最新版本，您可以在应用程序中定义灵活的根组件和任意数量的框架（page-router-outlet）。所以不会在应用程序组件中创建默认的框架/页面。页面只能注入到那些在 page-router-outlet 中加载的组件中。

【解决方案2】：

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

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

【讨论】：

还有其他方法吗？我不使用页面标签
@Elgendy 如果您使用 Angular，则使用指令，我已经发布了一个答案，展示了如何使用它。
还有其他方法吗？我不使用页面标签或角度

【解决方案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;
    }
}

【讨论】：

适用于 Android 和 iOS，但尝试在浏览器中运行 Angular 应用程序时崩溃

【解决方案4】：

如果您使用 Angular 并且没有在 html 中使用 page，或者您正在使用模块的延迟加载，或者您有多个 page-router-outlet，那么您可以利用 directives。

创建一个新指令：

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>

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

declarations: [
 AppComponent,
 MyDirective
],

【讨论】：

一个非常优雅的利用 Angular 的解决方案。
这个答案对于code-sharing 项目来说是必不可少的（也是唯一有效的）。谢谢！
不知道为什么上面的所有解决方案都对我有用 - 但网格的第一行不在屏幕上

【解决方案5】：

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

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

【讨论】：

这个答案应该更高。随着使用 page-router-outlet 的 Nativescript 的较新版本，这更加简单、快速和干净。谢谢。

【解决方案6】：

有两种方法可以实现：

XML 标记：只需将 'actionBarHidden="true"' 添加到您的页面标记中。即<Page loaded="pageLoaded" actionBarHidden="true"> </Page>

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

【讨论】：

【解决方案7】：

ActionBar {
  height: 0;
}

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

【讨论】：

添加一个段落或解释发帖者如何使用此代码来解决他/她的问题可能会有所帮助。并且可能为什么他/她发布的代码没有。

【解决方案8】：

从“@angular/core”导入{组件，OnInit}；从“@nativescript/core”导入 { Page }；

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

constructor(
    private page: Page
    ) { 
    }

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

}

【讨论】：