Wie füge ich beim Navigieren in einer React Native-App zwei Bildschirme hinzu, zeige sie aber nicht in einer TabBar an?

Question

Ich möchte, dass die Benutzerregistrierungs- und Anmeldeschnittstelle nicht im TabBar 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 authentication-Bedingung eine Navigation erstellt, um eine TabBar für jeden Status der Anwendung anzuzeigen, entweder im Gastmodus oder im Authentifizierungsmodus. Ich habe auch eine TabBar-Komponente, um das Symbol für jede Navigation anzuzeigen.

Das Problem tritt auf, wenn ich die Bildschirme LoginScreen hinzufügen möchte, weil ich keinen Zugriff darauf habe.

Ich habe versucht, eine dritte Navigation 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 TabBar

zugegriffen werden.

Ich möchte, dass sie in der Navigation enthalten sind, aber nicht in der TabBar angezeigt werden.

Diese Bildschirme werden nicht zur Datei TabBar hinzugefügt, daher wird das Icon nicht angezeigt, aber der Titel

Ich habe versucht, options={{ tabBarVisible: false }} zu verwenden, aber es hatte keine Auswirkung

Auch display = "none" ohne Erfolg versucht.

Ich habe bei Google nach einer Lösung gesucht, aber nichts gefunden.

Ich möchte mein Navigationssystem vorführen, um mir zu zeigen, was ich falsch mache und wie ich meine Fehler korrigieren kann.

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

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

exportieren

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

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

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;

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

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

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

exportieren

我还为登录和注册创建了一个导航系统

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

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

exportieren

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

错误:未处理任何导航器的负载为{"name":"Login"}的动作'NAVIGATE'。 是否有名为'Login'的屏幕？ Weitere Informationen finden Sie unter https://reactnavigation.org/docs/nesting-navigators#navigation-to-a-screen-in-a-nested-navigator. 这只是一个开发时的警告，不会在生产中显示.

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

<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>

Answer 1

要解决这个问题，请像这样将Guestnavigator添加到AuthNavigator中：

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

将App.js重构为：

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

并且不要忘记从GuestNavigator中移除登录选项卡。