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

Question

为什么下面的代码会产生这个结果：https://imgur.com/a/lQhLs8o？
但是，如果我将BottomNavigatorBar 组件移动到CountryListComponent 之前的顶部位置，它会产生如下所示的预期结果：https://imgur.com/a/23z7bb2？

<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>

CountryListComponent

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

Answer 1

引用DockLayout documentation，默认情况下stretchLastChild 将是true，这意味着BottomNavigationBar 将占用整个空间，如果它是最后一个孩子，反之亦然。