Nativescript android remove action bar

问题

I am trying to develop android app using Nativescript and try to remove Action Bar (top bar with "testns" title), but don't know how. I am using code below but not working. Currently using tns v.1.3.0

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

回答1:

You can explicitly control the visibility of the ActionBar by setting the actionBarHidden property of the Page, look this:

import {Page} from "ui/page";

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

回答2:

Finally I find the answer how to remove the actionbar. By adding actionBarHidden = "true" inside tag Page in xml file :

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

回答3:

This is the code for hidding the ActionBar in your NativeScript Angular TypeScript component.

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

回答4:

If you are using angular and you don't use page in your html or you are using lazy loading of modules or you have multiple page-router-outlet, you take advantage of directives.

Create a new directive:

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

and use this directive for the html where you want to hide the actionbar.

SecondPage.html

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

P.S. Don't forget to declare it in NgModule as directives are declarables. This is very useful for code sharing projects as you will be declaring it in ngmodule.tns.ts and it will not be compiled for web project.

declarations: [
 AppComponent,
 MyDirective
],

回答5:

There are two ways to achieve this:

XML markup: just add 'actionBarHidden="true"' to your page markup. i.e<Page loaded="pageLoaded" actionBarHidden="true"> </Page>

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

and in your .ts

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

回答6:

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

add [actionBarVisibility="never"] this in in your [app.component.html] file. Its working fine in my project.

回答7:

ActionBar {
  height: 0;
}

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

来源：https://stackoverflow.com/questions/33381486/nativescript-android-remove-action-bar

标签

android

nativescript