如何在React Native应用程序中导航时添加两个屏幕，但不在TabBar中显示它们？

Question

<p>我需要用户注册和登录界面不显示在应用程序的<code>TabBar</code>中 我有一个简单的应用程序，我试图有两种类型的用户界面，一种是访客模式，一种是用户认证模式。 我为每个<code>authentication</code>条件创建了一个导航，以便显示应用程序的每个状态对应的TabBar，或者访客模式或者认证模式。我还有一个<code>TabBar</code>组件来显示每个导航的图标。</p> <p>当我想要添加<code>LoginScreen</code>和<code>RegisterScreen</code>屏幕时，问题出现了，因为我无法访问它们。</p> <p>我尝试创建第三个<code>Navigation</code>（AuthNavigator）来管理这些屏幕，最终获得了访问权限，但它们显示在TabBar上， 但是这是不允许的，这些屏幕不能从<code>TabBar</code>访问</p> <p>我需要它们在导航中，但不显示在<code>TabBar</code>上。</p> <p>在<code>TabBar</code>文件中没有添加这些屏幕，所以不显示<code>Icon</code>，但显示标题</p> <p>我尝试使用<code>options={{ tabBarVisible: false }}</code>，但没有效果</p> <p>还尝试了<code>display = "none"</code>，但没有成功。</p> <p>我在Google上寻找解决方案，但没有找到任何东西。</p> <p>我想展示我的导航系统，以指导我做错了什么，以及如何纠正我的错误。</p> <p>--------- App.js ---------</p>

从 'react' 导入 React
从'@react-navigation/native'导入{NavigationContainer}
从 './navigation/GuestNavigator' 导入 GuestNavigator
从 './navigation/AppNavigator' 导入 AppNavigator

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

  返回 （
    <导航容器>
      {用户已验证吗？ (
        >
      ) : (
        >
      )}
    </导航容器>
  ）
}
导出默认应用程序

<p><strong>---这是访客模式的导航---</strong></p> <p>---- GuestNavigator.JS -------</p> <pre class="brush:php;toolbar:false;">从 '@react-navigation/bottom-tabs' 导入 { createBottomTabNavigator }; 从 '../components/TabBar' 导入 TabBar； const Tab = createBottomTabNavigator(); const GuestNavigator = ({ handleLogin }) =>; { 返回 （ ; }> > <Tab.Screen name=“SampleNotas”组件={SampleNotasScreen} /> <Tab.Screen name=“SampleCuras”组件={SampleCurasScreen} /> <Tab.Screen name=“SamplePerfil”组件={SamplePerfilScreen} /> <选项卡屏幕 名称=“登录” 选项={{ tabBarVisible: false }} 孩子们={()=> } >> </Tab.Navigator> ）； }; 导出默认GuestNavigator;</pre> <p><em><strong>--这是认证模式的导航--</strong></em></p>

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

<pre class="brush:php;toolbar:false;">从 '@react-navigation/bottom-tabs' 导入 { createBottomTabNavigator }; 从 '../components/TabBar' 导入 TabBar； const Tab = createBottomTabNavigator(); const AppNavigator = () =>; { 返回 （ ; }> > <Tab.Screen name="Curas" component={CurasScreen} /> > > </Tab.Navigator> ）； }; 导出默认 AppNavigator <p>我还为登录和注册创建了一个导航系统</p> <p>-------- AuthNavigator.js ----------</p>

从 'react' 导入 React
从'@react-navigation/native'导入{NavigationContainer}
从 '@react-navigation/stack' 导入 { createStackNavigator }
从 '../screens/AuthScreens/LoginScreen' 导入 LoginScreen
从 '../screens/AuthScreens/RegisterScreen' 导入 RegisterScreen

const Stack = createStackNavigator()

const AuthNavigator = () =>; {
  返回 （
    <导航容器>
      
        <堆栈屏幕
          名称=“登录”
          组件={登录屏幕}
          选项={{
            标头显示：假，
          }}
        >>
        <堆栈屏幕
          名称=“注册”
          组件={注册屏幕}
          选项={{
            标题：“注册”，
          }}
        >>
      </Stack.Navigator>
    </导航容器>
  ）
}

导出默认 AuthNavigator

; <p>当然，如果我从GuestNavigator导航中删除LoginScrein，我会得到错误：</p> <p><strong>错误：未处理任何导航器的负载为{"name":"Login"}的动作'NAVIGATE'。 是否有名为“登录”的屏幕？ 如果您尝试导航到跳转导航器中的屏幕，请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。 这只是一个开发时的警告，不会在生产中显示。</strong></p> <p>我还显示了 TabBar，尽管它显示了图标，但这些屏幕没有添加。----- TabBar.js -----------</p>

从 'react' 导入 React;
从 'react-native' 导入 { View, TouchableOpacity, Text };
从“react-native-vector-icons/Ionicons”导入图标；
const TabBar = ({ 状态, 描述符, 导航, isUserAuthenticated }) =>; {
  返回 （
    <视图样式={{ flexDirection: 'row', height: 60, backgroundColor: '#F3F9F5' }}>
      {state.routes.map((路线，索引) => {
        const { 选项 } = 描述符[route.key];
        const onPress = () =>; {
          const 事件 = navigation.emit({
            类型：'tabPress'，
            目标：路线.key，
          });
          if (!event.defaultPrevented) {
            导航.navigate(路线.名称);
          }
        };
        const isFocused = state.index === 索引；
        常量颜色= isFocused ？ '#08A438' : '黑色';
        让图标名称；
        if (!isUserAuthenticated) {
          // 邀请时尚图标
          if (route.name === '家') {
            图标名称 = '家';
          } else if (route.name === 'SampleNotas') {
            图标名称 = '列表';
          } else if (route.name === 'SampleCuras') {
            图标名称 = 'medkit';
          } else if (route.name === 'SamplePerfil') {
            图标名称 = '人物';
          }
        } 别的 {
          // 验证方式图标
          if (route.name === 'Notas') {
            图标名称 = '注释';
          } else if (route.name === 'Curas') {
            图标名称 = 'medkit';
          } else if (route.name === 'Recordatorios') {
            图标名称 = '闹钟';
          } else if (route.name === '个人资料') {
            图标名称 = '人物';
          }
        }
        返回 （
          <可触摸不透明度
            键={索引}
            onPress={onPress}
            样式={{ flex: 1,alignItems: 'center', justifyContent: 'center' }}
          >
            <</code></pre>            

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中移除登录选项卡。