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