React native - как сохранить TabNavigator на каждом экране

Question

Я использую комбинацию навигатора вкладок, стекового навигатора и переключателя навигатора в своем собственном приложении реакции с react-navigation.

Это хорошо работает, за исключением того, что я хотел бы сохранить нижние вкладки на каждом экране. В настоящее время, если я перейду к экрану 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

но это не работает, потому что в реакции-навигации 3 мне нужно установить контейнер приложения напрямую, и я не уверен, как его обойти. Единственное другое решение, которое я могу придумать, - это создать собственный компонент, представляющий собой просто панель с кнопками, указывающими на разные страницы, но мне интересно, могу ли я просто использовать TabNavigator?

Answer 1

Рекомендуется, чтобы TabNavigation был верхним элементом в вашем стеке навигации.На каждой вкладке может быть свой StackNavigation.Если вы используете SwitchNavigation для Auth, что, вероятно, означает «Экран входа в систему», вы можете поместить SwitchNavigation вверху с двумя дочерними элементами Auth и Tab и включить Home, User, Feed и т. Д. В разные StackNavigations, которые являются дочерними для 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'
});