Comment ajouter deux écrans lors de la navigation dans une application React Native, mais ne pas les afficher dans une TabBar ?

Question

J'ai besoin que l'interface d'enregistrement et de connexion de l'utilisateur ne soit pas affichée dans le TabBar J'ai une application simple et j'essaie d'avoir deux types d'interface utilisateur, l'une en mode invité et l'autre en mode d'authentification utilisateur. J'ai créé une navigation pour chaque condition d'authentification afin d'afficher une TabBar pour chaque état de l'application, soit en mode invité, soit en mode authentification. J'ai également un composant TabBar pour afficher l'icône de chaque navigation.

Le problème survient lorsque je souhaite ajouter les écrans LoginScreen et RegisterScreen

J'ai essayé de créer un troisième Navigation (AuthNavigator) pour gérer ces écrans et j'ai finalement obtenu l'accès, mais ils apparaissent sur la barre d'onglets, Mais cela n'est pas autorisé, ces écrans ne sont pas accessibles depuis TabBar

J'ai besoin qu'ils soient dans la navigation, mais qu'ils ne soient pas affichés dans la TabBar.

Ces écrans ne sont pas ajoutés dans le fichier TabBar, donc l'Icône

J'ai essayé d'utiliser options={{ tabBarVisible: false }} mais cela n'a eu aucun effet

J'ai également essayé display = "none" sans succès.

J'ai cherché une solution sur Google mais je n'ai rien trouvé.

Je souhaite afficher mon système de navigation pour me guider sur les erreurs que je fais et sur la manière de corriger mes erreurs.

--------- App.js ---------

importer React depuis 'react'
importer { NavigationContainer } depuis '@react-navigation/native'
importer GuestNavigator depuis './navigation/GuestNavigator'
importer AppNavigator depuis './navigation/AppNavigator'

const App = () => {
 
  const isUserAuthenticated = false; 

  retour (
    <NavigationContainer>
      {isUserAuthenticated ? (
        <AppNavigator />
      ) : (
        <GuestNavigator />
      )}
    </NavigationContainer>
  )
}
exporter l'application par défaut

---这是访客模式的导航---

---- GuestNavigator.JS -------

import { createBottomTabNavigator } depuis '@react-navigation/bottom-tabs';
importer TabBar depuis '../components/TabBar' ;

const Tab = createBottomTabNavigator();

const GuestNavigator = ({ handleLogin }) => {
  retour (
    <Tab.Navigator tabBar={props => <TabBar {...props} />}>
      <Tab.Screen name="Accueil" composant={HomeScreen} />
      <Tab.Screen name="SampleNotas" composant={SampleNotasScreen} />
      <Tab.Screen name="SampleCuras" composant={SampleCurasScreen} />
      <Tab.Screen name="SamplePerfil" composant={SamplePerfilScreen} />
      <Écran de tabulation
        nom="Connexion"
        options={{ tabBarVisible : false }}
        enfants={() => <LoginScreen handleLogin={handleLogin} />}
      />
    </Tab.Navigator>
  );
} ;
exporter le GuestNavigator par défaut;

--这是认证模式的导航--

------ AppNavigator.JS ---------

import { createBottomTabNavigator } depuis '@react-navigation/bottom-tabs';
importer TabBar depuis '../components/TabBar' ;
const Tab = createBottomTabNavigator();

const AppNavigator = () => {
  retour (
    <Tab.Navigator tabBar={props => <TabBar {...props} />}>
      <Tab.Screen name="Notas" composant={NotasScreen} />
      <Tab.Screen name="CrearNota" composant={CrearNotaScreen} options={{ tabBarVisible : false }} />
      <Tab.Screen name="Curas" composant={CurasScreen} />
      <Tab.Screen name="Recordatorios" composant={RecordatoriosScreen}/>
      <Tab.Screen name="Profile" composant={ProfileScreen} />
      <Tab.Screen name="EditProfile" composant={EditarProfileScreen} options={{ tabBarVisible: false }} />
    </Tab.Navigator>
  );
} ;
exporter AppNavigator

------- AuthNavigator.js ----------

importer React depuis 'react'
importer { NavigationContainer } depuis '@react-navigation/native'
importer { createStackNavigator } depuis '@react-navigation/stack'
importer LoginScreen depuis '../screens/AuthScreens/LoginScreen'
importer RegisterScreen depuis '../screens/AuthScreens/RegisterScreen'

const Pile = createStackNavigator()

const AuthNavigator = () => {
  retour (
    <NavigationContainer>
      <Stack.Navigator>
        <Pile.Écran
          nom="Connexion"
          composant={LoginScreen}
          options={{
            headerShown : faux,
          }}
        />
        <Pile.Écran
          nom="S'inscrire"
          composant={RegisterScreen}
          options={{
            titre : 'Registro',
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

exporter AuthNavigator

当然，我从GuestNavigator导航中删除LoginScrein，我会得到错误：

错误：未处理任何导航器的负载为{"name":"Connexion"}的动作'NAVIGATE'。 'Connexion'的屏幕？ Il y a un lien vers https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator. 这只是一个开发时的警告，不会在生产中显示。

----- TabBar.js -----------

<code> importer React depuis 'react';
importer {View, TouchableOpacity, Text} depuis 'react-native' ;
importer l'icône depuis 'react-native-vector-icons/Ionicons' ;
const TabBar = ({ état, descripteurs, navigation, isUserAuthenticated }) => {
  retour (
    <View style={{ flexDirection : 'row', hauteur : 60, backgroundColor : '#F3F9F5' }}>
      {state.routes.map((route, index) => {
        const { options } = descripteurs[route.key];
        const onPress = () => {
          const événement = navigation.emit({
            tapez : 'tabPress',
            cible : route.key,
          });
          si (!event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        } ;
        const isFocused = state.index === index;
        const color = isFocused ? '#08A438' : 'noir' ;
        laissez iconName ;
        si (!isUserAuthenticated) {
          // Icônes pour le mode invité
          if (route.name === 'Accueil') {
            iconName = 'accueil';
          } sinon if (route.name === 'SampleNotas') {
            iconName = 'liste';
          } sinon if (route.name === 'SampleCuras') {
            iconName = 'medkit';
          } sinon if (route.name === 'SamplePerfil') {
            iconName = 'personne';
          }
        } autre {
          // Icônes pour le mode authentique
          if (route.name === 'Notes') {
            iconName = 'notes';
          } sinon if (route.name === 'Curas') {
            iconName = 'medkit';
          } else if (route.name === 'Enregistreurs') {
            iconName = 'alarme';
          } else if (route.name === 'Profile') {
            iconName = 'personne';
          }
        }
        retour (
          <OpacitéTouchable
            clé={index}
            onPress={onPress}
            style={{ flex : 1, alignItems : 'center', justifierContent : 'center' }}
          >
            <</code>

Answer 1

Pour résoudre ce problème, ajoutez Guestnavigator à AuthNavigator comme ceci :

const AuthNavigator = ({}) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="GuestStack" component={GuestNavigator}/>
      <Stack.Screen name="Login" component={LoginScreen}/>
      <Stack.Screen name="Register" component={RegisterScreen}/>
   </Stack.Navigator>
  );
};

Refactor App.js vers :

const App = () => {    
  return (
    <NavigationContainer>
      {isAuth ? <AuthNavigator /> : <AppNavigator />}
    </NavigationContainer>
  )
}

Et n'oubliez pas de supprimer l'onglet de connexion de GuestNavigator.