reactjs 在特定屏幕中隐藏底部选项卡栏

jvidinwx  于 2023-05-17  发布在  React
关注(0)|答案(3)|浏览(156)

我正在开发一个移动的应用程序,需要您的帮助。我想隐藏底部标签栏中的“授权”路由名称。我试过stackoverflow和google的几种方法,但都不起作用。我的代码:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {View} from 'react-native';
import Auth from './views/Auth';
import AuthState from './context/auth/AuthState';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import Home from './views/Home';

const Tab = createMaterialBottomTabNavigator();

const App = () => {
  return (
    <AuthState>
      <NavigationContainer>
        <Tab.Navigator initialRouteName="auth">
          <Tab.Screen name="auth" component={Auth} />
          <Tab.Screen name="home" component={Home} />
        </Tab.Navigator>
      </NavigationContainer>
    </AuthState>
  );
};

export default App;
zqry0prt

zqry0prt1#

一个更好的解决方案是创建布局组件

  • 授权和未授权布局组件
  • 您将有 Package 器准备用于这些屏幕上的未来更新
xxb16uws

xxb16uws2#

在阅读了你的需求之后,我建议你尝试'React-Navigator' API编写的身份验证流程方法,而不是将“Auth”页面放在同一个标签导航器中。
主要的目的是使用两个导航器。
1.“Auth”的堆栈导航器
1.登录用户可以看到的页面的选项卡导航器
但是,要使此流可用,您需要添加像Redux/React Context这样的全局状态管理库来处理显示的导航器。

<NavigationContainer>
    <Stack.Navigator>
    {
        !redux.isLoggedIn ?
        <Stack.Group>
            <Stack.Screen 
               name="auth" 
               component={Auth}
            />
        </Stack.Group>
        :
        <Stack.Group>
            <Stack.Screen
               name="home"
               component={YourHomeTabNavigator}
            />
        </Stack.Group>
    }
    </Stack.Navigator>
</NavigationContainer>
0ejtzxu1

0ejtzxu13#

嵌套导航器解决的问题

相关问题