Maison  >  Questions et réponses  >  le corps du texte

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

<p>J'ai besoin que l'interface d'enregistrement et de connexion de l'utilisateur ne soit pas affichée dans le <code>TabBar</code> 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 <code></code> afin d'afficher une TabBar pour chaque état de l'application, soit en mode invité, soit en mode authentification. J'ai également un composant <code>TabBar</code> pour afficher l'icône de chaque navigation. </p> <p>Le problème survient lorsque je souhaite ajouter les écrans <code>LoginScreen</code> et <code>RegisterScreen</code> </p> <p>J'ai essayé de créer un troisième <code>Navigation</code> (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 <code>TabBar</code></p> <p>J'ai besoin qu'ils soient dans la navigation, mais qu'ils ne soient pas affichés dans la <code>TabBar</code>. </p> <p>Ces écrans ne sont pas ajoutés dans le fichier <code>TabBar</code>, donc l'<code>Icône</code> <p>J'ai essayé d'utiliser <code>options={{ tabBarVisible: false }}</code> mais cela n'a eu aucun effet</p> <p>J'ai également essayé <code>display = "none"</code> sans succès. </p> <p>J'ai cherché une solution sur Google mais je n'ai rien trouvé. </p> <p>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.</p> <p>--------- App.js ---------</p> <pre class="brush:php;toolbar:false;">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</pre> <p><strong>---这是访客模式的导航---</strong></p> <p>---- GuestNavigator.JS -------</p> <pre class="brush:php;toolbar:false;">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;</pre> <p><em><strong>--这是认证模式的导航--</strong></em></p> <p>------ AppNavigator.JS ---------</p> <pre class="brush:php;toolbar:false;">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</pre> <p> <p>------- AuthNavigator.js ----------</p> <pre class="brush:php;toolbar:false;">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</pre> <p>当然,我从GuestNavigator导航中删除LoginScrein,我会得到错误:</p> <p><strong>错误:未处理任何导航器的负载为{"name":"Connexion"}的动作'NAVIGATE'。 'Connexion'的屏幕? Il y a un lien vers https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator. 这只是一个开发时的警告,不会在生产中显示。</strong></p> <p>----- TabBar.js -----------</p> <pre><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></pre>
P粉155551728P粉155551728448 Il y a quelques jours664

répondre à tous(1)je répondrai

  • P粉014218124

    P粉0142181242023-08-21 09:35:05

    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.

    répondre
    0
  • Annulerrépondre