<p>I need the user registration and login interface not to be displayed in the application's <code>TabBar</code> 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 <code>authentication</code> condition to display a TabBar for each state of the application, either guest mode or authentication mode. I also have a <code>TabBar</code> component to display the icon for each navigation. </p> <p>The problem arises when I want to add the <code>LoginScreen</code> and <code>RegisterScreen</code> screens because I don't have access to them. </p> <p>I tried creating a third <code>Navigation</code> (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 <code>TabBar</code></p> <p>I need them to be in the navigation, but not displayed on the <code>TabBar</code>. </p> <p>These screens are not added in the <code>TabBar</code> file, so the <code>Icon</code> is not displayed, but the title</p> <p>I tried using <code>options={{ tabBarVisible: false }}</code> but it had no effect</p> <p>Also tried <code>display = "none"</code> without success. </p> <p>I looked for a solution on Google but didn't find anything. </p> <p>I would like to demonstrate my navigation system to guide me on what I am doing wrong and how to correct my mistakes.</p> <p>--------- App.js ---------</p> <pre class="brush:php;toolbar:false;">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</pre> <p><strong>---这是访客模式的导航---</strong></p> <p>---- GuestNavigator.JS -------</p> <pre class="brush:php;toolbar:false;">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;</pre> <p><em><strong>--这是认证模式的导航--</strong></em></p> <p>------ AppNavigator.JS ---------</p> <pre class="brush:php;toolbar:false;">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</pre> <p>我还为登录和注册创建了一个导航系统</p> <p>------- AuthNavigator.js ----------</p> <pre class="brush:php;toolbar:false;">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</pre> <p>当然，如果我从GuestNavigator导航中删除LoginScrein，我会得到错误：</p> <p><strong>错误：未处理任何导航器的负载为{"name":"Login"}的动作'NAVIGATE'。 是否有名为'Login'的屏幕？ 如果您尝试导航到嵌套导航器中的屏幕，请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。 这只是一个开发时的警告，不会在生产中显示。</strong></p> <p>我还显示了TabBar，尽管它显示了图标，但这些屏幕没有添加。----- TabBar.js -----------</p> <pre><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></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>
  )
}