Почему этот блок пустого пространства над моей кнопкой?

Question

В моем проекте NativeScript с Angular я создаю страницу с выдвигающейся боковой панелью навигации.Я смог заставить работать навигационную панель, но по какой-то причине у меня теперь есть белый блок пространства над контентом, который я на самом деле хочу, и не могу найти, как от него избавиться. Вот демонстрация того, что я делаю на игровой площадке , а также код и 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

Вам необходимо отключить iosOverflowSafeArea , когда вы используете ScrollView.

Просто измените код, чтобы отключить его.

<StackLayout tkMainContent iosOverflowSafeArea="false">

Я обновил игровую площадку здесь .

PS С выпуском iPhone X и iOS 11 Apple предоставила своим пользователям новый ультра-иммерсивный пользовательский опыт, когда приложения заметно растягиваютвся поверхность телефона.Свойство iosOverflowSafeArea по умолчанию имеет значение true для всех компонентов, которые могут иметь дочерние элементы.Мы можем назвать их контейнерами.Это шесть макетов, ScrollView, ListView и Repeater.Для получения дополнительной информации об этом вы можете обратиться здесь .