Nativescript Vue：为什么代码在Dock布局中的位置很重要？

为什么下面的代码会产生这样的结果：？
但是，如果我将

BottomNavigatorBar

组件移动到

CountryListComponent

之前的顶部位置，它将生成如下所示的所需结果：

//首先
//第二

CountryListComponent

参考，默认情况下，

stretchLastChild

将为

true

，这意味着

底部导航栏

如果是最后一个子项，将占用整个空间，反之亦然

<template>
  <Page actionBarHidden="true">
      <DockLayout height="100%">

         // first
         <CountryListComponent dock="top">

         // second
          <BottomNavigationBar dock="bottom" activeColor="pink"
                            inactiveColor="yellow"
                            backgroundColor="black"
                            verticalAlignment="bottom"
                            @tabSelected="this.changeTab"
                            row="1">
              <BottomNavigationTab title="Fiaarst" icon="icon-29.png" />
              <BottomNavigationTab title="Second" icon="icon-29.png" />
              <BottomNavigationTab title="Third" icon="icon-29.png" />
          </BottomNavigationBar>

      </DockLayout>
  </Page>
</template>

<template>
        <StackLayout backgroundColor="blue">
        </StackLayout>
</template>