How to add two screens when navigating in a React Native app, but not show them in a TabBar?

Question

I need the user registration and login interface not to be displayed in the application's TabBar I have a simple application and I'm trying to have two types of user interface, one is guest mode and one is user authentication mode. I created a navigation for each authentication condition to display a TabBar for each state of the application, either guest mode or authentication mode. I also have a TabBar component to display the icon for each navigation.

The problem arises when I want to add the LoginScreen and RegisterScreen screens because I don't have access to them.

I tried creating a third Navigation (AuthNavigator) to manage these screens and eventually got access, but they show up on the TabBar, But this is not allowed, these screens are not accessible from TabBar

I need them to be in the navigation, but not displayed on the TabBar.

These screens are not added in the TabBar file, so the Icon is not displayed, but the title

I tried using options={{ tabBarVisible: false }} but it had no effect

Also tried display = "none" without success.

I looked for a solution on Google but didn't find anything.

I would like to demonstrate my navigation system to guide me on what I am doing wrong and how to correct my mistakes.

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

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import GuestNavigator from './navigation/GuestNavigator'
import AppNavigator from './navigation/AppNavigator'

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

  return (
    <NavigationContainer>
      {isUserAuthenticated ? (
        <AppNavigator />
      ) : (
        <GuestNavigator />
      )}
    </NavigationContainer>
  )
}
export default App

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

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

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

const Tab = createBottomTabNavigator();

const GuestNavigator = ({ handleLogin }) => {
  return (
    <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.Screen
        name="Login"
        options={{ tabBarVisible: false }}
        children={() => <LoginScreen handleLogin={handleLogin} />}
      />
    </Tab.Navigator>
  );
};
export default GuestNavigator;

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

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

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

const AppNavigator = () => {
  return (
    <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>
  );
};
export default AppNavigator

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

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

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

const Stack = createStackNavigator()

const AuthNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={LoginScreen}
          options={{
            headerShown: false,
          }}
        />
        <Stack.Screen
          name="Register"
          component={RegisterScreen}
          options={{
            title: 'Registro',
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default AuthNavigator

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

错误：未处理任何导航器的负载为{"name":"Login"}的动作'NAVIGATE'。 是否有名为'Login'的屏幕？ 如果您尝试导航到嵌套导航器中的屏幕，请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。 这只是一个开发时的警告，不会在生产中显示。

我还显示了TabBar，尽管它显示了图标，但这些屏幕没有添加。----- TabBar.js -----------

<code>import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
const TabBar = ({ state, descriptors, navigation, isUserAuthenticated }) => {
  return (
    <View style={{ flexDirection: 'row', height: 60, backgroundColor: '#F3F9F5' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });
          if (!event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };
        const isFocused = state.index === index;
        const color = isFocused ? '#08A438' : 'black';
        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';
          }
        } else {
          // Iconos para el modo autenticado
          if (route.name === 'Notas') {
            iconName = 'notes';
          } else if (route.name === 'Curas') {
            iconName = 'medkit';
          } else if (route.name === 'Recordatorios') {
            iconName = 'alarm';
          } else if (route.name === 'Profile') {
            iconName = 'person';
          }
        }
        return (
          <TouchableOpacity
            key={index}
            onPress={onPress}
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
          >
            <</code>

Answer 1

To resolve this issue, add the Guestnavigator to the AuthNavigator like this:

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

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

And don't forget to remove the login tab from GuestNavigator.