NativeScript Vue: Как добавить нижний компонент навигации, который будет сохраняться в приложении?

Question

Я использую NativeScript Vue и хочу добавить нижнюю навигационную панель iOS с 3 значками (Домой, Учетная запись, Корзина).Я бы предпочел посмотреть, смогу ли я сделать это самостоятельно, не добавляя для этого плагин.Получить компонент навигационной панели для показа на моем App.vue просто, но как мне сохранить это в остальных моих компонентах при изменении файла Vue?Могу ли я определить его в main.js и сделать его глобально доступным компонентом?

Answer 1

Если вы не хотите использовать существующее TabView и знаете о плюсах и минусах настраиваемого компонента пользовательского интерфейса, вы можете рассмотреть возможность использования щелевого компонента, который оборачивает содержимое вашей страницы.

PageFrame.vue

<template>
    <Page>
        <GridLayout rows="auto * auto">
            <ActionBarComponent row="0" :title="title" />
            <GridLayout row="1">
                <slot />
            </GridLayout>
            <NavBarComponent row="2" :section="section" />
        </GridLayout>
    </Page>
</template>

Home.vue

<template>
    <PageFrame title="Home" section="home">
        <!-- page content -->
    </PageFrame>
</template>

Использование реквизита section для выделения текущей страницы в навигационной панели.