在react-navigation V.7.x中隐藏特定屏幕中的底部标签栏

Question

我目前正在使用 @react-navigation/native 和 @react-navigation/bottom-tabs 创建底部标签栏。我已经成功地创造了一切，但我却被困在中间。我只需要隐藏某些特定屏幕的底部选项卡栏。我尝试了一切，但仍然做不到。如果有人可以帮助或给我任何想法将是一个很大的帮助。

我在索引中调用我的路线，如下所示=>

const Index = () => {
 return (
 <ErrorBoundary
   FallbackComponent={CustomFallBackComponent}
   onError={errorHandler}>
   <Provider store={store}>
     <Loader loading={false} />
     <Routes />
     <IFrameModal />
     <CustomToast store={store} />
    </Provider>
  </ErrorBoundary>
 );
};
export default Index;

我的路线=>

import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import {SplashScreenStack} from './StackNavigator';
import BottomTabNavigator from './TabNavigator';
import DrawerNavigator from './DrawerNavigator';

const Stack = createNativeStackNavigator();

export const Routes = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="SplashScreenStack"
        screenOptions={{headerShown: false}}>
        <Stack.Screen
          name="SplashScreenStack"
          component={SplashScreenStack}
          options={{gestureEnabled: false}}
        />
        <Stack.Screen
          name="BottomTabNavigator"
          component={BottomTabNavigator}
          options={{gestureEnabled: false}}
        />
        <Stack.Screen
          name="DrawerNavigator"
          component={DrawerNavigator}
          options={{gestureEnabled: false}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

我的底部选项卡=>

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {
  EcardScreenStack,
  HomeScreenStack,
  MyActivitiesScreenStack,
} from './StackNavigator';
import BottomTabBar from '../components/bottomTabBar/BottomTabBar';

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={({route}) => ({
        tabBarStyle:
          route.name === 'eCard' ? {display: 'none'} : {display: 'flex'},
      })}
      tabBar={props => <BottomTabBar {...props} />}>
      <Tab.Screen
        name="Home"
        component={HomeScreenStack}
        options={{headerShown: false}}
      />
      <Tab.Screen
        name="eCard"
        component={EcardScreenStack}
        options={{headerShown: false}}
      />
      <Tab.Screen name="My Activities" component={MyActivitiesScreenStack} />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;

抽屉=>

import React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import BottomTabNavigator from './TabNavigator';
import DrawerScreen from '../screens/drawer/Drawer';

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
        swipeEdgeWidth: 0.2,
        drawerType: 'front',
        swipeEnabled: true,
        overlayColor: '#292929',
      }}
      drawerContent={props => <DrawerScreen {...props} />}>
      <Drawer.Screen name="BottomTabNavigator" component={BottomTabNavigator} />
    </Drawer.Navigator>
  );
};

export default DrawerNavigator;

堆栈=>

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import LoginScreen from '../screens/loginScreen/LoginScreen';
import MyActivityScreen from '../screens/myActivityScreen/MyActicityScreen';
import HomeScreen from '../screens/homeScreen/HomeScreen';
import SplashViewScreen from '../screens/splashScreen/SplashScreen';
import PassionCategory from '../screens/homeScreen/passionDeals/passionCategory/PassionCategory';
import PassionFilter from '../screens/homeScreen/passionDeals/passionFilter/PassionFilter';

const Stack = createNativeStackNavigator();

export const SplashScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="SplashScreen"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="SplashScreen" component={SplashViewScreen} />
    </Stack.Navigator>
  );
};

export const HomeScreenStack = ({navigation}: {navigation: any}) => {
  return (
    <Stack.Navigator
      initialRouteName="HomeScreen"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
      <Stack.Screen name="PassionCategory" component={PassionCategory} />
      <Stack.Screen name="PassionFilter" component={PassionFilter} />
    </Stack.Navigator>
  );
};

export const EcardScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="LoginScreen"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="LoginScreen" component={LoginScreen} />
    </Stack.Navigator>
  );
};

export const MyActivitiesScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="MyActivity"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="MyActivity" component={MyActivityScreen} />
    </Stack.Navigator>
  );
};

我只需要隐藏底部标签栏

<Stack.Screen name="PassionFilter" component={PassionFilter} />

。我还必须隐藏电子卡堆栈的底部选项卡栏 t= 。因为我已经使用了

tabBarStyle:  route.name === 'eCard' ? {display: 'none'} : {display: 'flex'},

并隐藏了底部栏。我无法在这里执行类似的操作，因为在反应导航的当前版本中，我们无法捕获嵌套的堆栈屏幕。

如果有任何想法如何实现这一目标，这对许多人来说真的很有帮助。预先感谢您的帮助。

Answer 1

您可以在屏幕组件内使用 useFocusEffect 或 navigation.setOptions ：

import React from 'react';
import { View, Text } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

export default function DetailsScreen({ navigation }) {
  useFocusEffect(
    React.useCallback(() => {
      navigation.getParent()?.setOptions({
        tabBarStyle: { display: 'none' },
      });

      return () => {
        navigation.getParent()?.setOptions({
          tabBarStyle: { display: 'flex' },
        });
      };
    }, [navigation])
  );

  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
}