带有React Navigation的Drawing Navigation屏幕上的选项卡

时间:2018-11-15 17:50:04

标签: javascript react-native react-navigation react-navigation-stack react-navigation-drawer

给我一​​个非常复杂的应用程序布局,我还是React Native的新手,所以我很卡住。

目前,我在App.js中有一个正在调用的路由器文件。

基本上,每个页面的布局都必须是“标签”和“抽屉”,但有些页面只能通过DrawerNavigator进行引用,因此这些页面上没有“标签”。 基本上在下面的代码中,我需要“ UserCreate”堆栈可从抽屉式导航栏中访问,但页面上也具有选项卡。

我尝试将Drawer和Tabs嵌套到另一个StackNavigator中,但这似乎不起作用。有人有什么想法吗?

export const Checkout = createStackNavigator ({
    Cart: {screen: Cart},
    ThankYou: {screen: ThankYou}
 },{
    navigationOptions: {
        header: null,
    }
}
);

export const MenuNav = createStackNavigator ({
    Location: {screen: Location},
    Menu: {screen: Menu},
    CategoryDetails: {screen: CategoryDetails},
    ItemDetails: {screen: ItemDetails},
    },
    {
    navigationOptions: {
        header: null,
    }
  },
);

export const UserCreate = createStackNavigator ({
    Login: {screen: Login},
    SignUp: {screen: SignUp},
    Profile: {screen: Profile},
    }, {
    navigationOptions: {
        header: null,
    }
})

export const Tabs = createBottomTabNavigator({
    'Home': {
         screen: Home,
          },
    'Items': {
         screen: MenuNav,
          },
      },
    'Cart': {
         screen: Checkout,
      },
    'Info': {
         screen: Info,
       },
    },
    {
         tabBarPosition: 'bottom',
     },
);


export const createRootNavigator = () => {
    return createDrawerNavigator ({
        Home: {
            screen: Tabs
         },
        Profiles: {
            screen: UserCreate    
        }
        }, {
            initialRouteName: 'Home',
            contentComponent: SideNav,
            drawerWidth: 200,
        });

}

0 个答案:

没有答案