Question

我正在使用vue-native构建移动应用程序，但是在使用TabNavigator，StackNavigator和DrawerNavigator进行路由时遇到了一些问题。基本上我希望我的应用看起来像这样：主屏幕（无抽屉式导航器和选项卡导航器）>登录屏幕（无抽屉式导航器和选项卡导航器）>第一选项卡屏幕（是抽屉式导航器和是选项卡导航器）>第二选项卡屏幕（是抽屉式导航器和是选项卡导航器）等...

我的App.vue看起来像这样：

<template>
 <root>
      <app-navigation></app-navigation>
 </root>
</template>


<script>
     import Vue from "vue-native-core";
     import React from "react";
     import { StackNavigator, DrawerNavigator, TabNavigator, TabBarBottom, navigationService } from "vue-native-router";
     import { Root } from "native-base";
     import HomeScreen from "./views/home.vue";
     import LoginScreen from "./views/login.vue";
     import Tabscreen1 from "./views/tabscreen1.vue";
     import Tabscreen2 from "./views/tabscreen2.vue";
     import Sidebar from "./views/sidebar.vue";


     const Drawer = DrawerNavigator(
             {
                  tabscreen1: { screen: tabscreen1screen },
                  tabscreen2: { screen: tabscreen2screen }
             },
             {
                  contentComponent: props => <Sidebar {...props} />
             }
     );

     const tabNav = TabNavigator(
             {
                  tabscreen1: { screen: tabscreen1screen},
                  tabscreen2: { screen: tabscreen2screen },
             },
             {
                  tabBarPosition: "bottom",
                  tabBarComponent: TabBarBottom
             }
     );

     const AppNavigation = StackNavigator(
             {
                  Home: { screen: HomeScreen },
                  Login: { screen: LoginScreen },
                  Drawer: { screen: Drawer },
                  tabNav: { screen: tabNav }
             },
             {
                  initialRouteName: "Home",
                  headerMode: "none"
             }
     );


     export default {
          components: { Root, AppNavigation }
     };
</script>

但是我无法使其正常工作。它总是告诉我我可能忘记了导出，但是我不明白。是否有人拥有类似的应用程序和正常工作的App.Vue，并将这三个组件结合在一起？

一个应用程序中的TabNavigator，StackNavigator和DrawerNavigator

0 个答案: