TabNavigator, StackNavigator e DrawerNavigator em uma app

votos
0

Estou construindo um aplicativo móvel com vue-natal, mas eu estou correndo em alguns problemas com o encaminhamento com TabNavigator, StackNavigator e DrawerNavigator. Basicamente eu quero meu aplicativo para esta aparência: Homescreen (sem drawernavigator e nenhum TabNavigator)> loginscreen (sem drawernavigator e nenhum TabNavigator)> firsttabscreen (sim drawernavigator e TabNavigator sim)> secondtabscreen (sim drawernavigator e sim TabNavigator) etc ...

Meu App.vue é parecido com isto:

<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>

Mas eu não posso fazê-lo funcionar. Ele mantém me dizendo que eu provavelmente esqueceu de exportá-lo, mas eu não entendo. Alguém tem um aplicativo semelhante e um App.Vue trabalhar com esses 3 componentes juntos?

Publicado 19/12/2018 em 14:10
fonte usuário
Em outras línguas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more