如何在不在 TabBar 中显示的情况下将两个屏幕添加到 React Native 应用程序的导航中？

Question

赏金将在 6 天后到期。 此问题的答案有资格获得+200声望赏金。 gemita想要奖励现有的答案：

我想奖励帮助我解决这个问题的答案

我需要用户注册和登录屏幕不显示在应用程序的TabBar我有一个简单的应用程序，我试图在其中尝试两种类型的用户界面，一种用于访客模式，另一种用于用户通过身份验证时。 我为每个authentication条件都创建了一个导航，这样就显示了应用的每个state对应的TabBar，或者guest模式或者authenticated模式。 我还有一个TabBar组件来显示每个导航的图标。

当我想添加LoginScreen和RegisterScreen屏幕时出现问题，因为我无法访问它们。

我试图创建第三个Navigation （AuthNavigator）来管理这些屏幕，最终获得访问权限但它们显示在 TabBar 上，但这不可能，无法从TabBar访问这些屏幕

我需要它们在导航中，但不显示在TabBar上。

在TabBar文件中没有添加这些屏幕，所以没有显示Icon ，但标题是

我试过使用options={{ tabBarVisible: false }} ，但这没有效果

也display = "none"没有成功。

我在谷歌中寻找解决方案，但没有找到任何东西。

我想展示我的导航系统来指导我在做什么。 错了，可以纠正我的错误。

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

--这是AUTHENTICATED模式下的导航--

------ 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”。 你有一个名为“登录”的屏幕吗？ 如果您尝试导航到嵌套导航器中的屏幕，请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator 。 这是一个仅限开发的警告，不会在生产中显示。

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

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' }}
          >
            <Icon name={iconName} size={24} color={color} />
            <Text style={{ color }}>{route.name}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};
export default TabBar

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 = () => {
 
  const isAuth = false; 

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

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