web-dev-qa-db-ja.com

Nativescript Androidアクションバーを削除

Nativescriptを使用してAndroidアプリを開発し、アクションバー（「testns」タイトルのあるトップバー）を削除しようとしていますが、方法がわかりません。以下のコードを使用していますが動作していません。現在tns v.1.3.0を使用しています

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

Screenshot of the app

androidnativescript
20
Dilar

PageのactionBarHiddenプロパティを設定することで、ActionBarの可視性を明示的に制御できます。これを見てください：

import {Page} from "ui/page";

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

最後に、アクションバーを削除する方法の答えを見つけました。 xmlファイルのタグページ内にactionBarHidden = "true"を追加することにより：

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

これは、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;
    }
}
9
Bienvenido David

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

アクションバーを非表示にするHTMLに対してこのディレクティブを使用します。

SecondPage.html

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

追伸ディレクティブは declarables であるため、NgModuleで宣言することを忘れないでください。これは、ngmodule.tns.tsで宣言し、Webプロジェクト用にコンパイルされないため、コード共有プロジェクトに非常に役立ちます。

declarations: [
 AppComponent,
 MyDirective
],
4
Narendra

これを実現する方法は2つあります。

  1. XMLマークアップ： 'actionBarHidden = "true"'をページマークアップに追加するだけです。 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;
}
2
Chromonav
ActionBar {
  height: 0;
}
<ActionBar [title]="appTitle">
</ActionBar>
0
Alexis Tamariz