Android端NativeScript ActionBar组件自动对齐问题咨询

我编写了如下NativeScript Vue代码：

<template>
    <Page>
        <ActionBar title="Action Items">
            <StackLayout orientation="horizontal">
                <Image src="res://icon" width="40" height="40"
                    verticalAlignment="center" />
                <Label text="NativeScript" fontSize="24"
                    verticalAlignment="center" />
            </StackLayout>

            <NavigationButton text="Go Back" android.systemIcon="ic_menu_back"
                (tap)="onNavBtnTap()">
            </NavigationButton>

            <ActionItem (tap)="onShare()" ios.systemIcon="9"
                ios.position="left" android.systemIcon="ic_menu_share"
                android.position="actionBar">
            </ActionItem>

            <ActionItem (tap)="onDelete()" ios.systemIcon="16"
                ios.position="right" text="delete" android.position="popup">
            </ActionItem>

        </ActionBar>
        <ScrollView>
            <StackLayout class="home-panel">
                <!--Add your page content here-->
                <Label textWrap="true" text="Play with NativeScript!"
                    class="h2 description-label">
                    {{first}}
                </Label>
                <Label textWrap="true"
                    text=" Write code in the editor or drag and drop components to build a NativeScript mobile application."
                    class="h2 description-label" />
                <Label textWrap="true"
                    text="Scan the QR code with your mobile device and watch the changes sync live while you play with the code."
                    class="h2 description-label" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                first: "Once"
            };
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>

运行后效果如图：

其中NavigationButton自动左对齐，其余ActionItem自动右对齐，但我并未显式设置左右对齐属性，请问这是什么原因？

原因解析 #

这是NativeScript框架结合移动端平台原生特性的默认行为，具体可以从这几点理解：

• ActionBar的内置布局区域
  NativeScript的ActionBar组件内部预设了三个核心区域：左侧返回区、中间标题区、右侧操作区。NavigationButton作为专门的返回导航组件，框架默认将其归置到左侧区域，无需额外设置对齐属性。而普通ActionItem默认会被分配到右侧操作区，这是为了符合移动端APP的通用交互范式——返回按钮左置、操作按钮右置。

• 原生平台的行为映射
  NativeScript本质是对iOS和Android原生组件的封装，完全遵循两大平台的导航栏规范：

  • Android原生导航栏中，系统返回按钮默认固定在左侧，操作按钮默认放在右侧或溢出菜单中；
  • iOS原生导航栏的左侧默认承载返回类控件，右侧则是操作按钮组，NativeScript直接复用了这个原生布局逻辑。

• 显式配置的优先级
  你代码中给分享按钮设置了ios.position="left"，在iOS设备上它会跳出默认规则，显示在左侧区域；删除按钮设置的ios.position="right"则和默认行为一致，android.position="popup"则让它在Android上隐藏到溢出菜单，这些配置会覆盖默认的区域分配，但未配置的组件依然遵循框架默认规则。

内容的提问来源于stack exchange，提问作者Gandalf