Question

我想问问是否还有其他人遇到我现在遇到的这个问题。在NativeScript Playground上运行我的应用程序或使用自己的手机时，即使我使用hideActionBar行， ActionBar 也不会隐藏。我不知道它是否正在发生，因为我使用的是android系统，但以下是我想要实现的功能以及我现在所获得的功能的屏幕截图。 1.image 2.image

HTML

<Page xmlns="http://www.nativescript.org/tns.xsd" actionBarHidden="true" class="welcome">
    <GridLayout class="firstLayout" columns="*" rows="*, *, *" backgroundColor="green">

        <GridLayout row="0" columns="*" rows="60pt,auto, auto">
            <Image src="~/images/logo-icon.png" class="logo" row="1" width="65pt"></Image>
            <Label text="JOURNEY" class="text1" row="2" horizontalAlignment="center" verticalAlignment="middle"></Label>
        </GridLayout>

        <GridLayout row="1" columns="*" rows="auto, auto" verticalAlignment="center">
            <Label text="This app is designed for your. Journey will be" class="text2" row="0"></Label >
            <Label text="your guide." class="text3" row="1" ></Label >
        </GridLayout>

        <GridLayout row="2"  columns="*" rows="auto, auto, auto" verticalAlignment="bottom">
            <Button text="visitor login" class="buttonVL btn-active" id="button" (tap)="onButtonTapA()" row="0"></Button>
            <Label text="already a member?" class="text4" row="1"></Label >
            <Button text="login" class="buttonL" (tap)="onButtonTapB()" row="2" ></Button>
        </GridLayout>

    </GridLayout>
</Page>

CSS

.welcome {
    background-size: cover;
    background: url("~/images/login-background.png");
}

.home-panel{
    vertical-align: center; 
    font-size: 20;
    margin: 15;
}

.description-label{
    margin-bottom: 15;
}
.firstLayout{
    background-size: cover;
    background: url("~/images/login-background.png");
}
.text1 {    
    color: #FFFFFF; 
    font-family: Avenir;    
    font-size: 12px;        
    text-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
    margin: 10pt 0 0 0;
}
.text2 {    
    opacity: 0.8;   
    color: #FFFFFF; 
    font-family: Avenir;    
    font-size: 12px;    
    text-align: center; 
    text-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
    margin: 0 0 25px 0;
}
.text3{
    opacity: 0.8;   
    color: #FFFFFF; 
    font-family: Avenir;    
    font-size: 12px;    
    text-align: center; 
    text-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
    margin: 0 0 0 0;
}
.text4 {
    opacity: 0.6;   
    color: #FFFFFF; 
    font-family: Avenir;    
    font-size: 14px;
    text-align: center;
    margin: 20pt 0 10pt 0 ;
}

Button {
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.buttonVL {
    margin: 0 30pt 0px 30pt;
    background-color: #5E50E4;
    color:#FFFFFF;
    height: 40pt;
}
.buttonVL:active{
    transform: scale(1.05);
}
.buttonL {
    margin: 0 30pt 30pt 30pt;
    background-color: #FFFFFF;
    height: 40pt;
}
.buttonL:active{
    transform: scale(1.05);
}

Answer 1

尝试使用this.page.actionBarHidden = true;。它适用于iOS和Android设备。

请参见以下示例：

import { Component, OnInit } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page';

@Component({
  moduleId: module.id,
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent implements OnInit {

  constructor(private page: Page) { }

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

Answer 2

在您的ts文件中，导入Page

import { Page } from "ui/page";

和构造函数

constructor(private page: Page){}

在ngOnInit（）

this.page.actionBarHidden = true;

无需使用模拟器的NativeScript + Angular应用

2 个答案: