Naivescript/Angular 2:显示键盘时，UI底部栏在iOS中的行为不正确

我正在开发angular 2 nativescript应用程序。 在其中一个页面上，我们有一个底部栏，它最初需要出现在页面底部，当键盘被调用时，它会随之向上移动（参见屏幕截图）。该条在Android中正确显示，即底部条（id:bottombar）随着键盘向上移动。但这种行为在iOS中无法正常工作。即使键盘向上滑动，该栏仍保留在页面底部。如何在iOS中修复此行为

我的模板如下：

父模板：

<StackLayout>
<StackLayout sdkToggleNavButton>
    <ActionBar title="Parent" backgroundColor="#f82462">
    </ActionBar>
</StackLayout>

<GridLayout rows="auto, *">
    <GridLayout row="0" rows="auto auto">
        <StackLayout row="0" id="horizontal-tag-container">
            <horizontal-tag [name]="detailItem['item']"></horizontal-tag>
        </StackLayout>
        <StackLayout row="1" id="segmented-bar-container">
            <SegmentedBar class="m-5" #sb [items]="myItems" selectedIndex="0" (selectedIndexChange)="onChange(sb.selectedIndex)"></SegmentedBar>
        </StackLayout>
    </GridLayout>
    <GridLayout row="1" rows="*, auto">
        <!--The child template is replaced by router outlet-->
        <router-outlet></router-outlet>
    </GridLayout>
</GridLayout>

子模板（用于路由器出口）

尝试将布局放入scrollview。尝试将布局放入scrollview。

<GridLayout>
<GridLayout rows="*, auto">
    <StackLayout row="0" class="form">
        <StackLayout class="input-field">
            <TextView [(ngModel)]="textContent" class="input" hint="Write something"></TextView>
        </StackLayout>
    </StackLayout>
    <GridLayout row="1" backgroundColor="#f82462">
        <GridLayout height="50" columns="25*, 25*, 25*, 25*" backgroundColor="#f82462" id="bottom-bar">
            <GridLayout col="0" (tap)="setTab(0)">
                <Label class="fa fa-tab-icon" text="&#xf060;" [ngClass]="{'tab-selected': selected === 0}"></Label>
            </GridLayout>
            <GridLayout col="0" (tap)="setTab(0)">
                <Label text="Back" class="tabLabel" [ngClass]="{'tab-selected': selected === 0}"></Label>
            </GridLayout>
            <!--<GridLayout col="1" (tap)="setTab(1)">
                <Label class="fa fa-tab-icon" text="&#xf249;" [ngClass]="{'tab-selected': selected === 1}"></Label>
            </GridLayout>
            <GridLayout col="1" (tap)="setTab(1)">
                <Label text="Test" class="tabLabel" [ngClass]="{'tab-selected': selected === 1}"></Label>
            </GridLayout>-->
            <GridLayout col="2" (tap)="setTab(2)">
                <Label class="fa fa-tab-icon" text="&#xf030;" [ngClass]="{'tab-selected': selected === 2}"></Label>
            </GridLayout>
            <GridLayout col="2" (tap)="setTab(2)">
                <Label text="" class="tabLabel" [ngClass]="{'tab-selected': selected === 2}"></Label>
            </GridLayout>
            <GridLayout col="3" (tap)="setTab(3)">
                <Label class="fa fa-tab-icon" text="&#xf061;" [ngClass]="{'tab-selected': selected === 3    }"></Label>
            </GridLayout>
            <GridLayout col="3" (tap)="setTab(3)">
                <Label text="Next" class="tabLabel" [ngClass]="{'tab-selected': selected === 3}"></Label>
            </GridLayout>
        </GridLayout>
    </GridLayout>
</GridLayout>
</GridLayout>