NativeScript-Vueの$showModalを使ってモーダル表示したらActionBarが消えた

はじめに

プロジェクトの修正で
今まで$navigateToを使って画面遷移していた箇所を$showModalに変更しました。
そして表示していたActionBarが表示されなくなりました。
その時調査したものを整理します。

結論

いきなり結論ですが、
モーダルのHTML部分を<Frame></Frame>で囲まなかったからです。

<template>
    <Page class="page">
        （省略）
    </Page>
</template>

を

<template>
    <Frame>
        <Page class="page">
            （省略）
        </Page>
    </Frame>
</template>

に修正したら即解決です。

再現してみた

Playgroundでものすごくシンプルなプロジェクトを用意しました。
１０分くらいで。

コード

中にはホーム画面以外にモーダルAとモーダルBがあります。
HTML部分のみ抜粋します。
<Frame></Frame>の部分しか変わっていません。

ModalA.vue

<template>
    <Page>
        <ActionBar title="Modal A ActionBar" />
        <FlexboxLayout flexDirection="column">
            <Label text="I am modal A!" />
            <Button @tap="$modal.close" text="Close" />
        </FlexboxLayout>
    </Page>
</template>

ModalB.vue

<template>
    <Frame>
        <Page>
            <ActionBar title="Modal B ActionBar" />
            <FlexboxLayout flexDirection="column">
                <Label text="I am modal B!" />
                <Button @tap="$modal.close" text="Close" />
            </FlexboxLayout>
        </Page>
    </Frame>
</template>

そしてホーム画面。
$showModalでモーダルAとモーダルBを表示するためのボタンをそれぞれ用意します。
ボタン配置もすごくテキトーにやりました。
importするだけではHTMLから取得できないのでdataからreturnしています。
fullscreenは…いつもの習慣で入れただけです。
Androidのみ有効です。（iOSは必ずfullscreenになる）

ModalTest.vue

<template>
    <Page>
        <ActionBar title="ActionBarTest" />
        <GridLayout rows="*, auto, auto, *">
            <Button row="1" text="Modal A"
                @tap="$showModal(modalA,　{ fullscreen: true })"
                class="custom-button" />
            <Button row="2" text="Modal B"
                @tap="$showModal(modalB,　{ fullscreen: true })"
                class="custom-button" />
        </GridLayout>
    </Page>
</template>

<script>
    import modalA from "./ModalA";
    import modalB from "./ModalB";
    export default {
        data() {
            return {
                modalA,
                modalB
            };
        }
    };
</script>

画面

NativeScript PlaygroundとNativeScript Previewを使い、実際にスマホで動かしてみました。
ホーム画面はこんな感じです。
手抜き感がすごい…

順番にボタンをタップします。
上のModal Aボタンから。

びっくりするほど何もない

下のModal Bボタンから。

おっ、ActionBarが出てきました！

参考資料

このIssueを読んでだらすぐ解決できました。
ありがとうございます。
https://github.com/nativescript-vue/nativescript-vue/issues/311