我可以将 BottomNavigation 与组件一起使用吗？

Question

我正在尝试显示底部导航，其中 TabContent 来自组件。现在，使用以下代码我无法显示选项卡内容，而且我没有收到任何错误。

PageContainer.vue:

<template>
   <BottomNavigation selectedIndex="1" class="tab__container" @loaded="loaded">
     <TabStrip>
       <TabStripItem class="tab">
         <Label :text="text.groups" />
       </TabStripItem>

       <TabStripItem class="tab">
         <Label :text="text.mail" />
       </TabStripItem>
     </TabStrip>

     <TabContentItem>
       <GroupsScreen />
     </TabContentItem>

     <TabContentItem>
       <MailScreen />
     </TabContentItem>
   </BottomNavigation>
 </template>

<script >
   import GroupsScreen from './GroupsScreen';
   import MailScreen from './MailScreen';

   export default {
     components: {
       GroupsScreen,
       MailScreen,
     },

     data() {
       return {
           text: {
             groups: 'Groepen',
             mail: 'Berichten',
           },
       }
     },
   }
</script>

GroupsScreen.vue:

<template>
   <Frame @loaded="loaded">
       <ActionBar :title="text.groups" />
       <StackLayout class="page">
         <Label v-if="groupsLoading" text="Loading"></Label>
       </StackLayout>
   </Frame>
 </template>

这甚至可能吗，或者我正在尝试做一些应该以其他方式完成的事情？

Answer 1

层次结构始终是，

帧数
页数
内容（布局、滚动视图等）

一个Frame只能承载一个Page，不能直接承载Content。仅当您想在特定容器内导航时才需要 Frame。

所以你的主要问题不是用 Page 元素包装你的 BottomNavigation。

Updated Playground

我可以将 BottomNavigation 与组件一起使用吗？

Can I use BottomNavigation with components?

vue.js

nativescript

nativescript-vue