react-navigation抽屉和堆栈嵌套

时间:2019-03-02 20:51:27

标签: react-native react-navigation

我想完成最常见的android结构:带标头的抽屉导航器(stackNavigator)。

该应用程序非常简单:它是一本字典,并显示按首字母(BrowseScreen分组的项目列表,还允许通过关键字(SearchScreen进行搜索,有人称其为Master –详细信息模式)。 从这两个屏幕开始,我必须能够到达ItemScreen(显示单个术语的详细信息)。

如何在react-navigator 3中构造它?这是我的尝试,但是我不确定这是最好的方法,而且我也不知道将ItemScreen放在哪里。当我在ItemScreen上时,任何抽屉项目都不应处于活动状态。

const RootDrawer = createDrawerNavigator(
    {

        Home: {
            screen: createStackNavigator({
                Home: { screen: Home },
                //Browse: { screen: Browse },
                //Search: { screen: Search }
            }, {
                initialRouteName: 'Home',

            })
        },
        Browse: {
            screen: createStackNavigator({
                Browse: { screen: Browse }, //it shows a grid of buttons with the alphabet
                Search: { screen: Search }, //it shows the items by a First letter 
            }, {
                initialRouteName: 'Browse',
            })

        },
        Search: {
            screen: createStackNavigator({
                Search: { screen: Search}
            }, {
                initialRouteName: 'Search',
            })
        },
        Bookmarks: {
            screen: createStackNavigator({
                Bookmark: { screen: Bookmarks },
                Item: { screen: ItemScreen  },
            }, {
                initialRouteName: 'Bookmark',
            })
        }
    },
    {
        mode: 'modal',
        headerMode: 'screen' ,
        initialRouteName: 'Home',
    }
);

0 个答案:

没有答案