React navigation 5 Masquer la barre d'onglets du navigateur de pile

Vous devriez essayer de réorganiser votre calque d'écran,

Original

• Barre d'onglets
  • Étang (pile)
    • PondScreen
    • DetailScreen
  • Stock
  • Autres

Au lieu de cela, essayez de placer une pile supérieure sur

• TopStack
  • Barre d'onglets
    • PondScreen
    • Stock
    • Autres
  • Détails

Cela devrait pouvoir masquer la barre d'onglets inférieure ou l'en-tête de l'onglet dans chaque écran

J'ai eu presque le même problème avec une tabnavigation en tant que parent et stacknavigation en tant qu'enfant et la réorganisation de ma couche d'écran n'était pas une option. J'ai donc cherché une autre solution et à partir des documents, j'ai découvert que l'interface utilisateur de navigation parentale était toujours affichée sur l'enfant. Mais la documentation a également donné un excellent exemple sur la façon de modifier un en-tête parent à partir d'un enfant. J'ai donc pris cet exemple et l'ai implémenté pour la visibilité de la barre d'onglets. C'est ainsi que je l'ai implémenté.

J'ai donc une barre d'onglets de navigation avec Accueil, Contacts et plus, et à l'intérieur de chaque onglet, j'ai une pile. L'écran dans lequel je cache la barre d'onglets se trouve dans CameraView, et cet écran est un écran de pile dans l'onglet Plus.

• Accueil
• Contacts
• Plus

  • Profil
  • CameraView (ici je veux cacher la barre d'onglets)

Tabnavigation:

Comme vous pouvez le voir, j'obtiens la visibilité de la barre d'onglets à partir d'une méthode.

<Stack.Navigator initialRouteName="More">
  <Stack.Screen name="More" component={More}/>
  <Stack.Screen name="UserProfile" component={Profile}/>
  <Stack.Screen name="CameraView" component={CameraView}/>
</Stack.Navigator>

Méthode getTabBarVisibility:

C'est là que je vérifie si le nom de la route est CameraView que j'ai défini dans StackNavigation.

getTabBarVisibility = (route) => {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : '';

  if (routeName === 'CameraView') {
    return false;
  }

  return true;
}

Et le composant MoreNavigation:

Ceci est ma stacknavigation pour Plus, où vous pouvez voir que le nom d'écran est CameraView.

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="Home" component={HomeNavigation} />
    <Tab.Screen name="Contacts" component={ContactNavigation} />
    <Tab.Screen
      name="More"
      component={MoreNavigation}
      options={({ route }) => ({
        tabBarVisible: this.getTabBarVisibility(route)
      })}
    />
  </Tab.Navigator>
</NavigationContainer>

L'astuce consiste à ajouter TabsStack, OtherStack ou SomeOtherScreen dans votre

<Stack.Navigator /> via un <Stack.Screen />

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="TabsStack" component={TabsStack} />
        <Stack.Screen name="SomeOtherScreen" component={SomeOtherScreen} />
        <Stack.Screen name="OtherStack" component={OtherStack} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

c'est documenté ici

Ajoutez cette fonction pour masquer la barre inférieure dans MyTabBar

  const MoreStack = createStackNavigator();

  export default class MoreStackScreen extends React.Component {
    render() {
      return (
        <MoreStack.Navigator initialRouteName={'More'}>
          <MoreStack.Screen
            name={'More'}
            component={More}
          />
          <MoreStack.Screen
            name={'Profile'}
            component={Profile}
          />
        </MoreStack.Navigator>
      );
    }
  }

MyTabBar

    const MainAppNavigator = ({userToken}) => {
      return (
        <NavigationContainer>
          {!userToken ? (
            <AuthNavigator />
          ) : (
              <Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}>
              <Tab.Screen
                name={'Dashboard'}
                component={DashboardStackScreen}
              />
              <Tab.Screen
                name={'More'}
                component={MoreStackScreen}
                options={({route}) => ({
                  tabBarVisible: getTabBarVisibility(route),
                })}
              />
            </Tab.Navigator>

          )}
        </NavigationContainer>
      );
    };

ajouter la visibilité de la barre inférieure dans la pile d'écran

    const getTabBarVisibility = (route) => {
      const routeName = route.state
        ? route.state.routes[route.state.index].name
        : '';

      if (routeName === 'Profile') {
        return false;
      }

      return true;
    };

Ajouter des options dans les navigateurs des onglets principaux

    import { View, Text, TouchableOpacity } from 'react-native';

    function MyTabBar({ state, descriptors, navigation }) {
      const focusedOptions = descriptors[state.routes[state.index].key].options;

      if (focusedOptions.tabBarVisible === false) {
        return null;
      }

      return (
        <View style={{ flexDirection: 'row' }}>
          {state.routes.map((route, index) => {
            const { options } = descriptors[route.key];
            const label =
              options.tabBarLabel !== undefined
                ? options.tabBarLabel
                : options.title !== undefined
                ? options.title
                : route.name;

            const isFocused = state.index === index;

            const onPress = () => {
              const event = navigation.emit({
                type: 'tabPress',
                target: route.key,
                canPreventDefault: true,
              });

              if (!isFocused && !event.defaultPrevented) {
                navigation.navigate(route.name);
              }
            };

            const onLongPress = () => {
              navigation.emit({
                type: 'tabLongPress',
                target: route.key,
              });
            };

            return (
              <TouchableOpacity
                accessibilityRole="button"
                accessibilityStates={isFocused ? ['selected'] : []}
                accessibilityLabel={options.tabBarAccessibilityLabel}
                testID={options.tabBarTestID}
                onPress={onPress}
                onLongPress={onLongPress}
                style={{ flex: 1 }}
              >
                <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
                  {label}
                </Text>
              </TouchableOpacity>
            );
          })}
        </View>
      );
    }

Ajouter un écran de profil dans More Stack

const focusedOptions = descriptors[state.routes[state.index].key].options;
if (focusedOptions.tabBarVisible === false) {
  return null;
}

La réponse acceptée est excellente, mais vous voudrez peut-être le faire en ligne et utiliser getFocusedRouteNameFromRoute pour être sûr. Ce code fait la même chose que la réponse acceptée:

<Tabs.Screen
    name="Home"
    component={HomeStack}
    options={({ route }) => ({
        tabBarVisible: ((route) => {
            const routeName = getFocusedRouteNameFromRoute(route) ?? ""

            if (routeName === "CameraView") {
                return false
            }

            return true
        })(route),
    })}
/>