Блог

Я нашел некоторые ответы со старыми версиями навигации, с опцией «Видимая панель вкладок» в Навигаторе вкладок. Но поскольку этой опции больше нет, я хочу знать, как скрыть панель вкладок на определенных экранах ВНУТРИ навигаторов стека, Это мой навигатор вкладок:

 <Tab.Navigator
            initialRouteName='Passports'
            screenOptions={{
                "tabBarLabelStyle": {
                    "fontSize": 12
                },
                "tabBarStyle": {
                    "backgroundColor": "white"
                }
            }}
        >
            <Tab.Screen
                name='EquipmentStack'
                component={EquipmentStack}
                options={{
                    tabBarLabel:'Equipment'
                }}
            />
            <Tab.Screen
                name='ObjectsStack'
                component={ObjectsStack}
                options={{ tabBarLabel:'Objects'}}
            />
            <Tab.Screen
                name='DocumentationStack'
                component={DocumentationStack}
                options={{ tabBarLabel:'Documentation'}}
            />
        </Tab.Navigator>
 

И мой Первый навигатор стека:

             <Stack.Screen
                name='Equipment'
                component={Equipment}
                options={{headerShown: false}}
           />
            <Stack.Screen
                name='Equipment Details'
                component={EquipmentDetails}
                options={{title:'Equipment Details'}}/>
            <Stack.Screen
                name='Equipment Details Update'
                component={EquipmentDetailsUpdate}
                options={{title:'Equipment Details Update'}}/>
            <Stack.Screen
                name='Equipment Details Update Zander'
                component={EquipmentDetailsUpdateZander}
                options={{title:'Equipment Details Update Zander'}}/>
        </Stack.Navigator>
 

Я хочу скрыть панель вкладок только на 3 экранах из 4 в моем стеке:
«Оборудование» 1 Экран : Панель вкладок
«Сведения об оборудовании» 2 Экран : Нет Панели вкладок
«Обновление сведений об оборудовании» 3 Экран : Нет Панели вкладок
«Обновление сведений об оборудовании Zander» 4 Экран : Нет Панели вкладок

Также мои 2 других навигатора стека такие же, и я также хочу сделать с ними то же самое :

 <Stack.Navigator>
            <Stack.Screen
                name='Objects'
                component={Objects}
                options={{headerShown: false}}/>
            <Stack.Screen
                name='Objects Details'
                component={ObjectsDetails}/>
            <Stack.Screen
                name='Objects Details Update'
                component={ObjectsDetailsUpdate}/>
        </Stack.Navigator>
 

         <Stack.Navigator>
            <Stack.Screen
                name='Documentation'
                component={Documentation}
                options={{headerShown: false}}/>
            <Stack.Screen
                name='Documentation Details'
                component={DocumentationDetails}/>
            <Stack.Screen
                name='Documentation Details Update'
                component={DocumentationDetailsUpdate}/>
        </Stack.Navigator>
 

В соответствии с моим пониманием того, чего вы пытаетесь достичь, можно сделать, как показано ниже. вы можете проверить

 export const TabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="Passports"
      screenOptions={{
        tabBarLabelStyle: {
          fontSize: 12,
        },
        tabBarStyle: {
          backgroundColor: 'white',
        },
      }}>
      <Tab.Screen
        name="Equipment"
        component={Equipment}
        options={{
          tabBarLabel: 'Equipment',
          headerShown: false,
        }}
      />
      <Tab.Screen
        name="Objects"
        component={Objects}
        options={{
          tabBarLabel: 'Objects',
          headerShown: false,
        }}
      />
      <Tab.Screen
        name="Documentation"
        component={Documentation}
        options={{
          tabBarLabel: 'Equipment',
          headerShown: false,
        }}
      />
    </Tab.Navigator>
  );
};

export const StackNavigation = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="TabNavigation"
        component={TabNavigation}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Equipment Details"
        component={EquipmentDetails}
        options={{title: 'Equipment Details'}}
      />
      <Stack.Screen
        name="Equipment Details Update"
        component={EquipmentDetailsUpdate}
        options={{title: 'Equipment Details Update'}}
      />
      <Stack.Screen
        name="Equipment Details Update Zander"
        component={EquipmentDetailsUpdateZander}
        options={{title: 'Equipment Details Update Zander'}}
      />

      <Stack.Screen name="Objects Details" component={ObjectsDetails} />
      <Stack.Screen
        name="Objects Details Update"
        component={ObjectsDetailsUpdate}
      />

      <Stack.Screen
        name="Documentation Details"
        component={DocumentationDetails}
      />
      <Stack.Screen
        name="Documentation Details Update"
        component={DocumentationDetailsUpdate}
      />
    </Stack.Navigator>
  );
};
 

Для текущей версии (v6.x) вы можете использовать: параметр tabBarStyle, передающий отображение как нет:

     tabBarStyle: {
        display: 'none'
    }
 

и если вы хотите снова отобразить панель вкладок, просто измените отображение на гибкое (значение по умолчанию).