Question

在我的Angular NativeScript项目中，我正在制作一个带有滑出侧边导航栏的页面。我能够使导航栏正常工作，但是由于某种原因，我现在在想要的内容上方有一个白色的空格，无法找到摆脱方法。 Here's a playground demo of what I'm doing，这是代码和html：

.ts文件：

import { Component, OnInit, AfterViewInit, ViewChild, ChangeDetectorRef } from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import { RadSideDrawerComponent } from "nativescript-ui-sidedrawer/angular";

@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ['./home.component.css']
})

export class HomeComponent implements AfterViewInit, OnInit {

    public isDrawerOpen: boolean;

    constructor(private _changeDetectionRef: ChangeDetectorRef) { }

    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
    private drawer: RadSideDrawer;

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
        this._changeDetectionRef.detectChanges();
    }

    ngOnInit() {
        this.isDrawerOpen = false;
    }

    public openDrawer() {
        if (!this.isDrawerOpen) {
            this.drawer.showDrawer();
            this.isDrawerOpen = true;
        }
        else {
            this.drawer.closeDrawer();
            this.isDrawerOpen = false;
        }
    }
}

.html文件：

<ActionBar title="Leagues" class="action-bar">
    <ActionItem>
        <StackLayout>
            <Button class="fa" text="&#xf0c9;" fontSize="20" (tap)="openDrawer()"></Button>
        </StackLayout>
    </ActionItem>
</ActionBar>

<RadSideDrawer tkExampleTitle tkToggleNavButton drawerContentSize="200">
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Commissioner Tools"></Label>
        </StackLayout>
        <ScrollView>
            <GridLayout columns="45, 150" rows="25, 25, 25, 25, 25" class="sideStackLayout">
                <Label text="&#xf091;" class="sideLabel fa" row="0" col="0"></Label>
                <Label text="Create a League" row="0" col="1"></Label>
                <Label text="&#xf500;" class="sideLabel fa" row="1" col="0"></Label>
                <Label text="Create a Team" row="1" col="1"></Label>
                <Label text="&#xf133;" class="sideLabel fa" row="2" col="0"></Label>
                <Label text="Create Schedule" row="2" col="1"></Label>
                <Label text="&#xf303;" class="sideLabel fa" row="3" col="0"></Label>
                <Label text="Record Results" row="3" col="1"></Label>
            </GridLayout>
        </ScrollView>
    </StackLayout>
    <StackLayout tkMainContent>
        <ScrollView orientation="vertical" class="pageBackground">
            <StackLayout class="pageBackground" height="100%" orientation="vertical">
                <StackLayout class="m-5"></StackLayout>
                <Button text="Basketball" class="basketballClass" style="width: 95%; height: 50; margin-top: 1%; border-width: 2px; border-color: black;"
                    (tap)=chooseLeague()></Button>
            </StackLayout>
        </ScrollView>
    </StackLayout>
</RadSideDrawer>

供参考，当前情况如下：

这就是我想要的样子：

Answer 1

在使用ScrollView时，需要禁用 iosOverflowSafeArea 。

只需更改您的代码即可取消更改。

<StackLayout tkMainContent iosOverflowSafeArea="false">

我已经更新了游乐场here。

P.S。随着iPhone X和iOS 11的发布，Apple为用户带来了全新的超身临其境的用户体验，这些应用程序明显地延伸了整个手机表面。对于可以有子级的所有组件，iosOverflowSafeArea属性默认为true。我们可以称它们为容器。这是六个布局，即ScrollView，ListView和Repeater。有关此内容的更多信息，可以参考here。

为什么我的按钮上方有这块空白？

1 个答案: