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

Question

I am using a combination of tab navigator, stack navigator, and switch nagivator in my react native app with react-navigation .

This works well, except I'd like to keep the bottom tabs in every screen. Currently if I navigate to UserProfile screen, then the bottom tabs go away.

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

To solve this, I tried making a component out of the tab navigator and just importing it in userProfile.js , like <BottomTab /> .

bottomTab.js:

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

export default BottomTab

but this doesn't work because in react-navigation 3 I have to set up the app container directly and I am not sure how to get around it. The only other solution I can think of is to create a custom component that is just a bar with buttons pointing to different pages, but I wonder if I can just use TabNavigator?

Answer 1

The recommended way is that a TabNavigation is the Top Item in your navigation stack. In each of the tabs you might have a different StackNavigation. If you use the SwitchNavigation for Auth which probably means a Login-Screen, you might put the SwitchNavigation at top with the two children Auth and Tab and include Home, User, Feed, etc. in different StackNavigations that are children of the TabNavigation. You could change for example as following:

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