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>