TabNavigator, StackNavigator und DrawerNavigator in einer App

stimmen
0

Ich baue eine mobile App mit vue-native, aber ich bin mit dem Routing mit TabNavigator, StackNavigator und DrawerNavigator in einige Probleme laufen. Grundsätzlich möchte ich meine App wie folgt aussehen: Homescreen (ohne drawernavigator und ohne TabNavigator)> Login (ohne drawernavigator und ohne TabNavigator)> firsttabscreen (ja drawernavigator und ja TabNavigator)> secondtabscreen (ja drawernavigator und ja TabNavigator) etc ...

Mein App.vue sucht wie folgt aus:

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

Aber ich kann es nicht bekommen zu arbeiten. Es hält mich zu sagen, dass ich es wahrscheinlich zu exportieren vergessen, aber ich verstehe nicht. Hat jemand eine ähnliche App und eine Arbeits App.Vue mit diesen drei Komponenten zusammen?

Veröffentlicht am 19/12/2018 um 14:10
quelle vom benutzer
In anderen Sprachen...                            

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