我在使用react-navigation
的本机应用程序中使用了tab导航器,堆栈导航器和switch nagivator的组合。
这很好用,除了我想在每个屏幕上保留底部标签。目前,如果我导航到UserProfile
屏幕,那么底部标签就会消失。
App.js:
const TabStack = createBottomTabNavigator({
Feed: { screen: FeedScreenStack },
MyProfile: { screen: ProfileScreenStack },
});
const UserStack = createStackNavigator(
{
UserProfile: { screen: userProfile },
Comments: { screen: comments }
}
);
const MainStack = createSwitchNavigator(
{
Home: TabStack,
User: UserStack,
Auth: AuthStack
},
{
initialRouteName: 'Home'
}
);
为了解决这个问题,我尝试用tab导航器制作一个组件,然后在userProfile.js
中导入它,就像<BottomTab />
一样。
bottomTab.js:
const BottomTab = createBottomTabNavigator({
Feed: { screen: FeedScreenStack },
MyProfile: { screen: ProfileScreenStack },
})
export default BottomTab
但这不起作用,因为在react-navigation 3中我必须直接设置app容器,我不知道如何解决它。我能想到的唯一其他解决方案是创建一个自定义组件,它只是一个按钮指向不同页面的栏,但我想知道我是否可以使用TabNavigator?
推荐的方法是TabNavigation是导航堆栈中的Top Item。在每个选项卡中,您可能具有不同的StackNavigation。如果您使用SwitchNavigation for Auth(这可能意味着登录屏幕),您可以将SwitchNavigation放在顶部,使用两个子节点Auth和Tab,并在不同的StackNavigations中包含HomeNaviation,用户,Feed等,这些都是TabNavigation的子节点。您可以更改,例如如下:
const TabStack = createBottomTabNavigator({
Feed: { screen: FeedScreenStack },
User: { screen: UserStack },
});
const UserStack = createStackNavigator({
UserProfile: { screen: userProfile },
Comments: { screen: comments },
MyProfile: { screen: ProfileScreenStack },
});
const MainStack = createSwitchNavigator({
Home: TabStack,
Auth: AuthStack
},
{
initialRouteName: 'Home'
});