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 将占用整个 space，如果它是最后一个 child反之亦然。