Question

我想完成最常见的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',
    }
);

react-navigation抽屉和堆栈嵌套

0 个答案: