TabNavigator, StackNavigator i DrawerNavigator w jednej aplikacji

głosy
0

Buduję aplikację mobilną z Vue-native ale używam do niektórych problemów z routingiem z TabNavigator, StackNavigator i DrawerNavigator. Zasadniczo chcę, aby moja aplikacja wyglądać następująco: Ekran główny (bez drawernavigator i bez tabnavigator)> loginscreen (bez drawernavigator i bez tabnavigator)> firsttabscreen (tak drawernavigator i tak tabnavigator)> secondtabscreen (tak drawernavigator i tak tabnavigator) etc ...

Moja App.vue wygląda tak:

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

Ale nie mogę zmusić go do pracy. To powtarza mi, że prawdopodobnie zapomniał go wyeksportować, ale nie rozumiem. Czy ktoś ma podobną aplikację i App.Vue pracy z tych 3 elementów razem?

Utwórz 19/12/2018 o 14:10
źródło użytkownik
W innych językach...                            

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