如何从特定屏幕上删除标签栏？

问题描述

我创建了一个带有4个标签导航器屏幕的导航器->主页，搜索，上传和库；而且我有堆栈导航屏幕，例如“注册”，“登录”，“主页”标签和视频。 现在，我想从“上传”屏幕中删除底部的标签栏，但不确定是否可以？

以下是我编写的确切代码：

import React from 'react';
import 'react-native-gesture-handler';
import {StatusBar} from 'react-native';
import {NavigationContainer,DarkTheme} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialIcons';

import Home from '../screens/Home';
import Search from '../screens/Search';
import Library from '../screens/Library';
import ProfileAuthor from '../screens/ProffileAuthor';
import Shoot from '../screens/Shoot';
import LoginScreen from '../screens/LoginScreen';
import SignUp from '../screens/SignUp';

const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();

function myTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#000"
      inactiveColor="#000"
      barStyle={{
        backgroundColor: '#FFF',}}>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          title: 'Home',tabBarLabel: 'Home',tabBarIcon: ({color}) => (
            <MaterialCommunityIcons color={color} name="home" size={26} />
          ),}}
      />
      <Tab.Screen
        name="Search"
        component={Search}
        options={{
          title: 'Search',tabBarLabel: 'Search',tabBarIcon: ({color}) => (
            <MaterialCommunityIcons color={color} name="search" size={26} />
          ),}}
      />
      <Tab.Screen
        name="Upload"
        component={Shoot}
        options={{
          title: 'Upload',tabBarLabel: 'Upload',tabBarIcon: ({color}) => (
            <MaterialCommunityIcons color={color} name="add-Box" size={26} />
          ),}}
      />
      <Tab.Screen
        name="Library"
        component={Library}
        options={{
          title: 'Library',tabBarLabel: 'Library',tabBarIcon: ({color}) => (
            <MaterialCommunityIcons
              color={color}
              name="person-outline"
              size={26}
            />
          ),}}
      />
    </Tab.Navigator>
  );
}

const Routes = () => {
  return (
    <NavigationContainer theme={DarkTheme}>
      <Stack.Navigator>
        <Stack.Screen
          name="login"
          component={LoginScreen}
          options={{
            header: () => null,}}
        />
        <Stack.Screen
          name="signup"
          component={SignUp}
          options={{
            header: () => null,}}
        />
        <Stack.Screen
          name="Home"
          component={myTabs}
          options={{
            header: () => null,}}
        />
        
        <Stack.Screen
          name="Video"
          component={ProfileAuthor}
          options={{
            header: () => null,}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Routes;

有人可以告诉我这种结构是否可行，如果可以，那么如何实现？任何帮助都会很棒。

解决方法

tabBarVisible ： false

当您使用来自 @ react-navigation / bottom-tabs 的 createBottomTabNavigator 时，此方法可以正常工作。但是如果您将使用 @ react-navigation / material-bottom-tabs 中的 createMaterialBottomTabNavigator 创建底部标签，则无法使用。 createMaterialBottomTabNavigator 无法隐藏标签栏，您可以看到文档中没有此类选项。如果希望底部选项卡导航器在堆栈导航器的其他屏幕上消失，则应尝试将其嵌套在堆栈导航器中。以下代码用于 createBottomTabNavigator 中的“隐藏”标签栏。

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

const BottomTabs = createBottomTabNavigator();

<BottomTabs.Navigator>
  <BottomTabs.Screen name={AppRoute.MORE} component={MoreStack}
        options={({ route }) => ({
            tabBarVisible: getTabBarVisibility(route),tabBarLabel: languages.stack_More
        })}
    />
</BottomTabs.Navigator>


const getTabBarVisibility = (route: any) => {
    const routeName = route.state ? route.state.routes[route.state.index].name: '';
   if (routeName === AppRoute.PROFILE
        || routeName === AppRoute.HELP_CENTER
        || routeName === AppRoute.TERMS_CONDITION) {
       return false;
    }
   return true;
}