1

我得到了一个非常复杂的应用程序布局，而且我对 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,
        });

}
4

0 回答 0