时间戳

首页 > 解决方案 > 在 React Native 的特定屏幕中隐藏 TabBar

android - 在 React Native 的特定屏幕中隐藏 TabBar

问题描述

我一直在尝试在特定屏幕中隐藏 tabBar，尝试了一些解决方案，但没有一个对我有用（使用 Native-Base）用于 UI。

我有一个 TabNavigator，我在其中传递了一个带有屏幕的堆栈。

所以我想要做的是在其中一个屏幕中隐藏 TabBar。请参阅下面的代码。

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import { NativeBaseProvider } from 'native-base';

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

//Stack of Screens linked with the search Menu.
function Recherche() {
  return (
    <Stack.Navigator initialRouteName="Recherche">
      <Stack.Screen
        name="Recherche"
        component={Search}
        options={{title: 'Recherche', headerShown: false}}
      />
      <Stack.Screen
        name="ViewCarte"
        component={ViewCarte}
        options={{title: 'ViewCarte', headerShown: false}}
      />
    </Stack.Navigator>
  );
}
//Stack of Screens linked with the Mon Espace Menu.
function MonEspace() {
  return (
    <Stack.Navigator initialRouteName="Espace">
      <Stack.Screen
        name="Espace"
        component={Espace}
        options={{title: 'Espace', headerShown: false}}
      />
      <Stack.Screen
        name="Compte"
        component={Compte}
        options={{title: 'Compte', headerShown: false}}
      />
    </Stack.Navigator>
  );
}

//Function constructing the  TabBar
function ViewLoc({navigation}) {
  return (
    <NativeBaseProvider>
      <Tab.Navigator
        initialRouteName="Recherche"
        tabBarOptions={{
          activeTintColor: '#0B3D91',
          style: {
            padding: 5,
            height: 60,
          },
          tabStyle: {
            paddingTop: 8,
            paddingBottom: 8,
          },
        }}>
        <Tab.Screen
          name="Recherche"
          component={Recherche}
          options={{
            tabBarIcon: ({color, size}) => (
              <SearchIcon color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Mon espace"
          component={MonEspace}
          options={{
            tabBarIcon: ({color, size}) => <ProfileIcon color={color} />,
            tabBarVisible: true,
          }}
        />
      </Tab.Navigator>
    </NativeBaseProvider>
  );
}

试图在屏幕“ViewCarte”和屏幕“Compte”中隐藏 tabBar。

标签： androidreactjsreact-nativereact-routernative-base

解决方案

你可以改变导航结构，你的结构应该是这样的

const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();

function TabsNavigatorComponent() {
  return (
      <Tab.Navigator>
         //any screen or stack here will show with tabs.
      </Tab.Navigator>
  )
}

<NavigationContainer>
   //the main Navigator shoud be Stack
   <RootStack.Navigator>   

     //outside any screen to here, to show it without tabs.
     <RootStack.Screen name="screenWithoutTabs" component={ScreenWithoutTabs}/>


     <RootStack.Screen name="bottomTabs" component={TabsNavigatorComponent}/>

   </RootStack.Navigator>
</NavigationContainer>

推荐阅读