Nativescript android删除操作栏

Posted 2023-02-19

【中文标题】Nativescript android删除操作栏

【英文标题】：Nativescript android remove action bar

【发布时间】：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; ;

【参考方案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;