blocks|key|2464334|text|您可以通过设置ActionBar的actionBarHidden属性来显式控制页面的可见性，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2464335|​|2464336|import+{Page}+from+"ui/page";

export+class+AppComponent+{
++++constructor(page:+Page)+{
++++++++page.actionBarHidden+=+true;
++++}
}|code-block|syntax|javascript|2464337|2464338|entityMap^0|7|9|13|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|O|$]]

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>import {Page} from "ui/page";

export class AppComponent {
 constructor(page: Page) {
 page.actionBarHidden = true;
 }
}</code></pre>
</div>
</div>

blocks|key|1848816|text|最后，我找到了如何删除actionbar的答案。通过在xml文件中添加actionBarHidden+=+"true"+inside+tag+Page：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1848817|<Page+xmlns="http://www.nativescript.org/tns.xsd"+loaded="pageLoaded"+actionBarHidden="true">
</Page>|code-block|syntax|javascript|1848818|entityMap^0|Z|O|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

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

<pre><code>&lt;Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded" actionBarHidden="true"&gt;
&lt;/Page&gt;
</code></pre>

blocks|key|5992412|text|这是在您的NativeScript+Angular+TypeScript组件中隐藏ActionBar的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5992413|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;
++++}
}|code-block|syntax|javascript|5992414|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>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;
 }
}
</code></pre>

blocks|key|5992456|text|如果您使用的是angular，但在html中没有使用page，或者您正在使用延迟加载模块，或者您有多个page-router-outlet，那么您可以利用directives。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5992457|创建一个新指令：|5992458|hideActionBar.ts|BOLD|5992459|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;
++++}
}|code-block|syntax|javascript|5992460|并对要隐藏actionbar的html使用此指令。|5992461|SecondPage.html|5992462|<GridLayout+tkExampleTitle+tkToggleNavButton+rows="auto,*"+hideActionBar>
+...//+other+html+goes+here
</GridLayout>|5992463|另外，由于指令是declarables，所以不要忘记在NgModule中声明它。这对于代码共享项目非常有用，因为您将在ngmodule.tns.ts中声明它，而不会为web项目编译它。|5992464|declarations:+[
+AppComponent,
+MyDirective
],|5992465|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/core/Directive|1|https://angular.io/api/core/Directive#declaring-directives^0|Q|4|1F|I|25|A|0|0|0|0|G|0|0|0|0|F|0|0|8|B|1|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|F|3|G|5|6|7|1H|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1I|8|@$9|1J|A|1K|B|J]]|D|@]|E|$]]|$1|K|3|L|5|M|7|1L|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|1M|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1N|8|@$9|1O|A|1P|B|J]]|D|@]|E|$]]|$1|T|3|U|5|M|7|1Q|8|@]|D|@]|E|$N|O]]|$1|V|3|W|5|6|7|1R|8|@]|D|@$9|1S|A|1T|1|1U]]|E|$]]|$1|X|3|Y|5|M|7|1V|8|@]|D|@]|E|$N|O]]|$1|Z|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16]]|17|$5|12|13|14|E|$15|18]]]]

If you are using angular and you don't use <code>page</code> in your html or you are using lazy loading of modules or you have multiple <code>page-router-outlet</code>, you take advantage of <a href="https://angular.io/api/core/Directive" rel="noreferrer">directives</a>. 

Create a new directive:

hideActionBar.ts

<pre><code>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;
 }
}
</code></pre>

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

SecondPage.html

<pre><code>&lt;GridLayout tkExampleTitle tkToggleNavButton rows="auto,*" hideActionBar&gt;
 ...// other html goes here
&lt;/GridLayout&gt;
</code></pre>

P.S. Don't forget to declare it in NgModule as directives are <a href="https://angular.io/api/core/Directive#declaring-directives" rel="noreferrer">declarables</a>. 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.

<pre><code>declarations: [
 AppComponent,
 MyDirective
],
</code></pre>

blocks|key|4575680|text|<page-router-outlet+actionBarVisibility="never"></page-router-outlet>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4575681|在您的app.component.html文件中添加actionBarVisibility="never“。它在我的项目中工作得很好。|4575682|entityMap^0|0|1X|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

<code>&lt;page-router-outlet actionBarVisibility="never"&gt;&lt;/page-router-outlet&gt;</code>

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

blocks|key|4575517|text|有两种方法可以实现这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4575518|true|4575519|标记:只需在页面标记中添加“actionBarHidden=”|unordered-list-item|4575520|
|4575521|“”即可。i.e<Page+loaded="pageLoaded"+actionBarHidden="true">+</Page>|offset|length|style|CODE|4575522|4575523|+|4575524|4575525|在你的.ts中|4575526|export+function+onNavigatingTo(args:+EventData)+{
++++const+page+=+<Page>args.object;
++++const+vm+=+new+Observable();
++++vm.set("abHidden",+value);
++++page.bindingContext+=+vm;
}|code-block|syntax|javascript|4575527|entityMap^0|0|0|0|0|8|1L|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|15|8|@$K|16|L|17|M|N]]|9|@]|A|$]]|$1|O|3|H|5|6|7|18|8|@]|9|@]|A|$]]|$1|P|3|Q|5|F|7|19|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1B|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1C|8|@]|9|@]|A|$X|Y]]|$1|Z|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|10|$]]

There are two ways to achieve this:

<ol>
<li>XML markup: just add 'actionBarHidden="true"' to your page markup.
i.e<code>&lt;Page loaded="pageLoaded" actionBarHidden="true"&gt;
&lt;/Page&gt;</code></li>
<li>
 
 
 

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

</li>
</ol>

and in your .ts

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

blocks|key|5992337|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5992338|ActionBar+{
++height:+0;
}|code-block|syntax|javascript|5992339|<ActionBar+[title]="appTitle">
</ActionBar>|5992340|5992341|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ActionBar {
 height: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ActionBar [title]="appTitle"&gt;
&lt;/ActionBar&gt;</code></pre>
</div>
</div>

blocks|key|2464471|text|从@angular/core导入{+Component，OnInit+}；从@nativescript/core导入{+Page+}；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2464472|@Component({+selector："ns-items"，templateUrl："./items.component.html"，})导出类ItemsComponent实现了OnInit+{|2464473|constructor(
++++private+page:+Page
++++)+{+
++++}

ngOnInit():+void+{
++++this.page.actionBarHidden+=+true;
}|code-block|syntax|javascript|2464474|}|2464475|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

import { Component, OnInit } from &quot;@angular/core&quot;;
import { Page } from &quot;@nativescript/core&quot;;
@Component({
selector: &quot;ns-items&quot;,
templateUrl: &quot;./items.component.html&quot;,
})
export class ItemsComponent implements OnInit {
<pre><code>constructor(
 private page: Page
 ) { 
 }

ngOnInit(): void {
 this.page.actionBarHidden = true;
}
</code></pre>
}

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

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

<a href="https://i.stack.imgur.com/UQhgH.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/UQhgH.jpg" alt="Screenshot of the app"></a>

Nativescript android remove action bar

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试使用Nativescript开发android应用程序，并尝试删除动作栏(顶部栏与"testns“标题)，但不知道如何。我正在使用下面的代码，但不工作。当前使用tns v.1.3.0 `var frameModule = require("ui/frame");     exports.pageLoaded = function(){         var topmost = fram

问Nativescript android删除操作栏
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Nativescript android删除操作栏EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Nativescript android删除操作栏
EN