React native-如何在每个屏幕中保留TabNavigator

Question

我在使用react-navigation的react native应用程序中使用了选项卡导航器，堆栈导航器和switch导航器的组合。

这很好用，只是我想在每个屏幕上保留底部的标签。目前，如果我导航到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'
  }
);

为解决此问题，我尝试使用标签导航器制作一个组件，然后将其导入userProfile.js中，例如将其导入<BottomTab />。

bottomTab.js：

const BottomTab = createBottomTabNavigator({
    Feed: { screen: FeedScreenStack },
    MyProfile: { screen: ProfileScreenStack },
})

export default BottomTab

但是这不起作用，因为在react-navigation 3中，我必须直接设置应用容器，而且我不确定如何解决它。我唯一想到的其他解决方案是创建一个自定义组件，该组件只是一个带有指向不同页面的按钮的栏，但是我想知道是否可以只使用TabNavigator？

Answer 1

推荐的方法是TabNavigation是导航堆栈中的头号项。在每个选项卡中，您可能具有不同的StackNavigation。如果使用SwitchNavigation for Auth可能意味着登录屏幕，则可以将SwitchNavigation放在两个子项Auth和Tab的顶部，并在属于TabNavigation子项的不同StackNavigation中包含Home，User，Feed等。您可以进行如下更改：

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'
});