[英]Reac Native + React Navigation - I want screen not to be visible on TabNavigator
I created a TabNavigator for my App but I want there just 5 of my screens. 我为我的应用创建了一个TabNavigator,但我只希望其中5个屏幕。 The rest I want to navigate to but not through the Tab (inside those I don't want the Tab to be visible as well).
我想导航到其余但不通过选项卡的其余部分(在那些我也不希望该选项卡也可见的内部)。 Here's my Router for now:
现在是我的路由器:
export default TabNavigator(
{
Dashboard: {
screen: DashboardContainer,
},
NotificationContainer: {
screen: NotificationContainer,
},
Movements: {
screen: MovementsContainer,
},
TopOwners: {
screen: TopOwnersContainer,
},
Menu: {
screen: MenuContainer,
},
},
)
And I import in in main index.js: 我在主要index.js中导入:
const App = () => (
<Root>
<Provider store={store}>
<TabNavigator />
</Provider>
</Root>
);
What can I do to have in my navigator screen6, screen7, screen8 and navigate to them but not show them on TabNavigator? 我可以在导航器的screen6,screen7,screen8中进行哪些操作,然后导航到它们,但不将它们显示在TabNavigator上?
You can use nested navigators : 您可以使用嵌套导航器:
const Screen1Router StackNavigator( // you can use a SwitchNavigator instead
{
Screen1: { screen: Screen1 },
Screen6: { screen: Screen6 },
Screen7: { screen: Screen7 },
}
)
export default TabNavigator(
{
Screen1: {
screen: Screen1Router,
},
Screen2: {
screen: Screen2,
},
Screen3: {
screen: Screen3,
},
Screen4: {
screen: Screen4,
},
Screen5: {
screen: Screen5,
},
}
);
in this example 5 tabs will be displayed, and you'll be able to navigate to Screen6 and Screen7 from the first tab. 在此示例中,将显示5个选项卡,您将能够从第一个选项卡导航至Screen6和Screen7。
Edit: 编辑:
If you don't want to see the tabs in Screen6 and Screen7 you have to nest the tabNavigator in the StackNavigator : 如果不想在Screen6和Screen7中看到选项卡,则必须将tabNavigator嵌套在StackNavigator中:
const tabNav = TabNavigator(
{
Screen1: {
screen: Screen1,
},
Screen2: {
screen: Screen2,
},
Screen3: {
screen: Screen3,
},
Screen4: {
screen: Screen4,
},
Screen5: {
screen: Screen5,
},
}
);
export default StackNavigator( // you can use a SwitchNavigator instead
{
Screen1: { screen: tabNav },
Screen6: { screen: Screen6 },
Screen7: { screen: Screen7 },
}
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.