Блог

Предыстория

На самом деле, я разработал навигатор нижних вкладок для своего приложения, который показывает только 5 значков / кнопок. Мне нужно, чтобы эта навигация отображалась почти на каждом экране.

Проблема

Это моя структура приложения:

 <NavigationContainer> 
  <Stack.Navigator initialRouteName={user ? 'Home' : 'Login'}
    screenOptions={{cardStyle: { backgroundColor: '#FFFFFF' }}}> 
    <Stack.Screen name="Home"options={{headerShown: false}}> 
      {props => <TabNav {...props} extraData={user} />} 
    </Stack.Screen> 
    <Stack.Screen name="Login" component={LoginScreen} options={{headerShown: false}}/> 
    <Stack.Screen name="RegistrationMethod" component={RegistrationMethod} options={{headerShown: false}}/>
    <Stack.Screen name="TermsScreen" component={TermsScreen}  options={{headerShown: false}}/> 
    <Stack.Screen name="Registration" component={RegistrationScreen}  options={{headerShown: false}}/> 
    <Stack.Screen name="Detail" options={{title: ''}} component={BarDetail}/> 
    <Stack.Screen name="Profile" options={{headerShown: false}}>
      {props => <ProfileScreen {...props} extraData={user} />}
    </Stack.Screen>
    <Stack.Screen name="personalDetails" options={{title: 'Perfil'}}>
      {props => <PersonalDetails {...props} extraData={user} />}
    </Stack.Screen>
    <Stack.Screen name="config" component={ConfigScreen} options={{title:'Configuración'}}/>
    <Stack.Screen name="menu" component={MenuScreen} options={{headerShown: false}}/>
    <Stack.Screen name="checkoutStart" component={checkoutStart} options={{title: 'Tu compra'}}/>
    <Stack.Screen name="checkoutII" component={checkoutII} options={{title: 'Tu compra'}}/>
    <Stack.Screen name="reviewScreen" component={ReviewScreen} options={{title: 'Tu opinión'}}/>
    <Stack.Screen name="searchScreen" component={TabNav} options={{headerShown: false}}/>
  </Stack.Navigator> 
</NavigationContainer>


<Tab.Navigator initialRouteName={user ? 'Home' : 'Login'} tabBarOptions={{showLabel: false}}
    screenOptions={{showLabel: false, cardStyle: { backgroundColor: '#FFFFFF' }}} sceneContainerStyle={{backgroundColor: 'white'}}>
      <Tab.Screen name="Home" options={{
            tabBarIcon: ({size,focused,color}) => {
              if (focused) {
                return (
                  <SelectedHome/>)
              } else {
                return (
                  <LinearHome/>)
              }
              ;},}}
          >
        {props => <HomeScreen {...props} extraData={user} />} 
      </Tab.Screen> 
      <Tab.Screen name="Fav" component={FavScreen} options={{
            tabBarIcon: ({size,focused,color}) => {
          
                return (
                  <LinearFav/>)
              
              ;},}}
              />
      <Tab.Screen name="Search" component={SearchScreen} options={{
            tabBarIcon: ({size,focused,color}) => {
              if (focused) {
                return (
                  <SelectedSearch/>)
              } else {
                return (
                  <LinearSearch/>)
              }
              ;},}}/>
      <Tab.Screen name="Notifications" component={NotificationsScreen} options={{
            tabBarIcon: ({size,focused,color}) => {
              if (focused) {
                return (
                  <SelectedNotifications/>)
              } else {
                return (
                  <LinearNotifications/>)
              }
              ;},}}/>
      <Tab.Screen name="HelpScreen" component={HelpScreen} options={{
            tabBarIcon: ({size,focused,color}) => {
              if (focused) {
                return (
                  <SelectedHelp/>)
              } else {
                return (
                  <LinearHelp/>)
              }
              ;},}}/>
    </Tab.Navigator>
 

Поэтому мне нужен навигатор вкладок таким, каким он должен отображаться на большинстве экранов из навигатора стека. Я думал изменить его, сделав все вкладки и стеки, но разве это не приведет к беспорядку, а также покажет каждый экран в нижнем колонтитуле как осязаемый?

Вопрос

Как я могу сохранить навигатор вкладок только с этими значками на каждом другом экране? (Обратите внимание, что решение должно учитывать, что оно должно быть скрыто на некоторых конкретных экранах.)

Если вы хотите показать нижний навигатор вкладок на определенных экранах, вам следует поместить эти экраны внутрь a <Stack.Navigator /> и поместить <Stack.Navigator /> внутрь <Tab.Navigator /> .

Более подробная информация здесь: https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab