TabNavigator, StackNavigator y DrawerNavigator en una aplicación

votos
0

Estoy construyendo una aplicación móvil con vue-natal, sino que estoy corriendo en algunos problemas con el enrutamiento con TabNavigator, StackNavigator y DrawerNavigator. Básicamente quiero mi aplicación para que parezca esto: pantalla de inicio (sin drawernavigator y sin TabNavigator)> loginscreen (sin drawernavigator y sin TabNavigator)> firsttabscreen (sí drawernavigator y TabNavigator sí)> secondtabscreen (sí drawernavigator y sí TabNavigator), etc ...

Mi App.vue está buscando de esta manera:

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

Pero no puedo conseguir que funcione. Se me dice que probablemente se me olvidó exportarlo, pero no entiendo. ¿Alguien tiene una aplicación similar y una App.Vue trabajar con los 3 componentes juntos?

Publicado el 19/12/2018 a las 14:10
fuente por usuario
En otros idiomas...                            

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