<p>Ich möchte, dass die Benutzerregistrierungs- und Anmeldeschnittstelle nicht im <code>TabBar</code> der Anwendung angezeigt wird. Ich habe eine einfache Anwendung und versuche, zwei Arten von Benutzeroberflächen zu verwenden, eine im Gastmodus und eine im Benutzerauthentifizierungsmodus. Ich habe für jede <code>authentication</code>-Bedingung eine Navigation erstellt, um eine TabBar für jeden Status der Anwendung anzuzeigen, entweder im Gastmodus oder im Authentifizierungsmodus. Ich habe auch eine <code>TabBar</code>-Komponente, um das Symbol für jede Navigation anzuzeigen. </p> <p>Das Problem tritt auf, wenn ich die Bildschirme <code>LoginScreen</code> hinzufügen möchte, weil ich keinen Zugriff darauf habe. </p> <p>Ich habe versucht, eine dritte <code>Navigation</code> zu erstellen, um diese Bildschirme zu verwalten, und habe schließlich Zugriff erhalten, aber sie werden in der TabBar angezeigt. Dies ist jedoch nicht zulässig. Auf diese Bildschirme kann nicht über <code>TabBar</code></p> zugegriffen werden. <p>Ich möchte, dass sie in der Navigation enthalten sind, aber nicht in der <code>TabBar</code> angezeigt werden. </p> <p>Diese Bildschirme werden nicht zur Datei <code>TabBar</code> hinzugefügt, daher wird das <code>Icon</code> nicht angezeigt, aber der Titel</p> <p>Ich habe versucht, <code>options={{ tabBarVisible: false }}</code> zu verwenden, aber es hatte keine Auswirkung</p> <p>Auch <code>display = "none"</code> ohne Erfolg versucht. </p> <p>Ich habe bei Google nach einer Lösung gesucht, aber nichts gefunden. </p> <p>Ich möchte mein Navigationssystem vorführen, um mir zu zeigen, was ich falsch mache und wie ich meine Fehler korrigieren kann.</p> <p>--------- App.js ---------</p> <pre class="brush:php;toolbar:false;">import React from 'react' importiere { NavigationContainer } aus '@react-navigation/native' GuestNavigator aus './navigation/GuestNavigator' importieren AppNavigator aus „./navigation/AppNavigator“ importieren const App = () => { const isUserAuthenticated = false; zurückkehren ( <NavigationContainer> {isUserAuthenticated ? ( <AppNavigator /> ) : ( <GuestNavigator /> )} </NavigationContainer> ) } Standard-App</pre> exportieren <p><strong>---这是访客模式的导航---</strong></p> <p>---- GuestNavigator.JS -------</p> <pre class="brush:php;toolbar:false;">import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; TabBar aus '../components/TabBar' importieren; const Tab = createBottomTabNavigator(); const GuestNavigator = ({ handleLogin }) => { zurückkehren ( <Tab.Navigator tabBar={props => <TabBar {...props} />}> <Tab.Screen name="Home" Component={HomeScreen} /> <Tab.Screen name="SampleNotas" Component={SampleNotasScreen} /> <Tab.Screen name="SampleCuras" Component={SampleCurasScreen} /> <Tab.Screen name="SamplePerfil" Component={SamplePerfilScreen} /> <Tab.Bildschirm name="Anmelden" Optionen={{ tabBarVisible: false }} Kinder={() => <LoginScreen handleLogin={handleLogin} />} /> </Tab.Navigator> ); }; Standard-GuestNavigator exportieren;</pre> <p><em><strong>--这是认证模式的导航--</strong></em></p> <p>------ AppNavigator.JS ---------</p> <pre class="brush:php;toolbar:false;">import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; TabBar aus '../components/TabBar' importieren; const Tab = createBottomTabNavigator(); const AppNavigator = () => { zurückkehren ( <Tab.Navigator tabBar={props => <TabBar {...props} />}> <Tab.Screen name="Notas" Component={NotasScreen} /> <Tab.Screen name="CrearNota" Component={CrearNotaScreen} options={{ tabBarVisible: false }} /> <Tab.Screen name="Curas" Component={CurasScreen} /> <Tab.Screen name="Recordatorios" Component={RecordatoriosScreen}/> <Tab.Screen name="Profile" Component={ProfileScreen} /> <Tab.Screen name="EditProfile" Component={EditarProfileScreen} options={{ tabBarVisible: false }} /> </Tab.Navigator> ); }; Standard-AppNavigator</pre> exportieren <p>我还为登录和注册创建了一个导航系统</p> <p>------- AuthNavigator.js ----------</p> <pre class="brush:php;toolbar:false;">import React from 'react' importiere { NavigationContainer } aus '@react-navigation/native' importiere { createStackNavigator } aus '@react-navigation/stack' LoginScreen importieren aus '../screens/AuthScreens/LoginScreen' Importieren Sie RegisterScreen aus '../screens/AuthScreens/RegisterScreen' const Stack = createStackNavigator() const AuthNavigator = () => { zurückkehren ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Anmelden" Komponente={LoginScreen} Optionen={{ headerShown: false, }} /> <Stack.Screen name="Registrieren" Komponente={RegisterScreen} Optionen={{ Titel: 'Registro', }} /> </Stack.Navigator> </NavigationContainer> ) } Standard-AuthNavigator</pre> exportieren <p>当然，如果我从GuestNavigator导航中删除LoginScrein，我会得到错误：</p> <p><strong>错误:未处理任何导航器的负载为{"name":"Login"}的动作'NAVIGATE'。 是否有名为'Login'的屏幕？ Weitere Informationen finden Sie unter https://reactnavigation.org/docs/nesting-navigators#navigation-to-a-screen-in-a-nested-navigator. 这只是一个开发时的警告，不会在生产中显示.</strong></p> <p>----- TabBar.js -----------</p> <pre><code>import React from 'react'; import { View, TouchableOpacity, Text } from 'react-native'; Importieren Sie das Symbol aus „react-native-vector-icons/Ionicons“; const TabBar = ({ state, descriptors, navigation, isUserAuthenticated }) => { zurückkehren ( <View style={{ flexDirection: 'row', height: 60, backgroundColor: '#F3F9F5' }}> {state.routes.map((route, index) => { const { Optionen } = descriptors[route.key]; const onPress = () => { const event = navigation.emit({ Typ: 'tabPress', Ziel: route.key, }); if (!event.defaultPrevented) { navigation.navigate(route.name); } }; const isFocused = state.index === index; const color = isFocused ? '#08A438': 'schwarz'; let iconName; if (!isUserAuthenticated) { // Iconos para el modo invitado if (route.name === 'Home') { iconName = 'home'; } else if (route.name === 'SampleNotas') { iconName = 'list'; } else if (route.name === 'SampleCuras') { iconName = 'medkit'; } else if (route.name === 'SamplePerfil') { iconName = 'Person'; } } anders { // Iconos para el modo autenticado if (route.name === 'Notas') { iconName = 'Notizen'; } else if (route.name === 'Curas') { iconName = 'medkit'; } else if (route.name === 'Recordatorios') { iconName = 'Alarm'; } else if (route.name === 'Profile') { iconName = 'Person'; } } zurückkehren ( <TouchableOpacity key={index} onPress={onPress} style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} > <</code></pre>

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>
  );
};

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