React Navigation 如何从堆栈导航中隐藏标签栏

Question

我有以下堆栈导航和屏幕：

export const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Categories: CategoriesScreen,
    Products: ProductsScreen,
    ProductDetails: ProductDetailsScreen,
})

我只想在 ProductDetailsScreen 中隐藏选项卡：

export const hideTabBarComponents = [
    'ProductDetails',
]

export const MainTabs = createBottomTabNavigator(
    {
        Home: HomeStack,
        Favorite: FavoriteScreen,
        Account: AccountScreen,
        Help: HelpScreen,
        Events: EventsScreen
    },
    {
        navigationOptions: ({ navigation }) => ({

            tabBarIcon: ({ focused, tintColor }) => {
                ...
            },
            tabBarLabel: ({ focused, tintColor }) => {
                ...
            },
            
            tabBarVisible: ! hideTabBarComponents.includes(navigation.state.routeName)

        }),
    }
);

问题是无法将任何选项从 Stack Navigation 传递给 Tab 导航

不是所有的堆栈屏幕只有其中一个

Answer 1

下面的代码解决了这个问题：

HomeStack.navigationOptions = ({ navigation }) => {

    let tabBarVisible = true;

    let routeName = navigation.state.routes[navigation.state.index].routeName

    if ( routeName == 'ProductDetails' ) {
        tabBarVisible = false
    }

    return {
        tabBarVisible,
    }
}

Answer 2

这就是我在堆栈中的特定屏幕中隐藏标签栏的方式（React Nav 5.x 和 6.x）

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
const ProfileStack = createStackNavigator();
    
const ProfileNavigator = ({ navigation, route }) => {
        React.useLayoutEffect(() => {
            const routeName = getFocusedRouteNameFromRoute(route);
            if (routeName === "Group"){
                navigation.setOptions({tabBarVisible: false});
            }else {
                navigation.setOptions({tabBarVisible: true});
            }
        }, [navigation, route]);
        return(
            <ProfileStack.Navigator>
                <ProfileStack.Screen name="Profile" component={ProfileScreen} />
                <ProfileStack.Screen name="Group" component={GroupScreen} />
            </ProfileStack.Navigator>
        )};

如果你们有许多需要隐藏标签栏的屏幕，请使用这些路由名称的字符串数组，如果焦点路由名称包含在该数组中，则隐藏标签栏

const tabHiddenRoutes = ["Group","Map"];

if(tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))){
  navigation.setOptions({tabBarVisible: false});
 }else{
 navigation.setOptions({tabBarVisible: true});
}

[编辑] - 在v6的情况下，使用display因为tabBarVisible已被弃用，有利于tabBarStyle -

if(tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))){
  navigation.setOptions({tabBarStyle: {display: 'none'}});
 } else {
 navigation.setOptions({tabBarStyle: {display: 'flex'}});
}

Answer 3

对于 React Navigation 5，您可以在堆栈组件内部执行此操作：

props.navigation.dangerouslyGetParent().setOptions({
  tabBarVisible: false
});

https://reactnavigation.org/docs/en/navigation-prop.html#setoptions---update-screen-options-from-the-component

但是要小心使用它，一旦卸载组件，您需要将 tabBarVisible 重置为 true。

例如，在 Stack 组件中使用 React 钩子：

    useEffect(() => {
      const parent = props.navigation.dangerouslyGetParent();
      parent.setOptions({
        tabBarVisible: false
      });
      return () =>
        parent.setOptions({
          tabBarVisible: true
        });
    }, []);

或者您可以通过按下后退按钮来重置 Stack.Screen 组件中的 tabBarVisible，如下所示：

    const StackNav = (props) => (
      <Stack.Screen
        name='name'
        component={Name}
        options={{
          headerTitle: 'Name',
          headerLeft: () => (
            <Text
              onPress={() =>
                props.navigation.setOptions({
                tabBarVisible: true
                })
              }
            >
              on back
            </Text>
          )
        }}
      />
    }

（第二种方法效果更好。）

Answer 4

首先让我们创建一个堆栈导航器并将其命名为 StackHome

const StackHome = createStackNavigator(
{
 Home: Home,
 CustomHide: CustomHide,
});
// This code let you hide the bottom app bar when "CustomHide" is rendering
StackHome.navigationOptions = ({ navigation }) => {
 let tabBarVisible;
  if (navigation.state.routes.length > 1) {
navigation.state.routes.map(route => {
  if (route.routeName === "CustomHide") {
    tabBarVisible = false;
  } else {
    tabBarVisible = true;
  }
});
 }

 return {
   tabBarVisible
 };
};
export default StackHome;

Answer 5

如果您使用navigation 6 ： Than The tabBarVisible option is no longer present 。 您可以通过在选项中指定tabBarStyle: { display: 'none' }来实现相同的行为。

Answer 6

使用 createBottomTabNavigator，您可以使用 defaultNavigationOptions 隐藏它

defaultNavigationOptions: {
  tabBarVisible: false,
},

Answer 7

如果像我一样，你很难在 React Navigation 6 中完成这项工作，这就是我实现它的方法......我有一个包含多个堆栈的 bottomTabNavigator，并希望在主堆栈的特定屏幕（播放器）上隐藏标签栏

    import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
    ...
    
    <BottomTabNavigator.Screen 
         name="HomeStack" 
         component={HomeStack} 
         options={({route}) =>({ tabBarStyle: getTabBarStyle(route) })} />
    
    ....
    const getTabBarStyle = (route) => {  
      const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
      let display = (routeName === 'Player') ? 'none':'flex';
      return {display}
    }

Answer 8

流程是这样的

import {
  getFocusedRouteNameFromRoute,
} from "@react-navigation/native";
<BottomTab.Navigator
      screenOptions={(props) => {
        console.log(getFocusedRouteNameFromRoute(props.route));
        return {
          tabBarActiveTintColor: Colors.Red,
          tabBarInactiveTintColor: Colors.Blue,
          headerShown: false,
          tabBarStyle: {
            display:
              getFocusedRouteNameFromRoute(props.route) === "ProdDetails"
                ? "none"
                : "flex",
          },
        };
      }}
    >
{...children}
</BottomTab.Navigator>

干杯

Answer 9

我就是这样做的。 选择要在其中隐藏选项卡栏的堆栈。 您可以根据索引选择它。

AppStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
    if (navigation.state.index > 0) {
       tabBarVisible = false;
    }
    return {
       tabBarVisible
    };
};

这是 React 导航文档的链接

Answer 10

const AppNavigation = createBottomTabNavigator( {

    Learning:
    {
        screen: LearningStack,
        navigationOptions: {
            tabBarLabel: 'Learning',
            // tabBarVisible: false,
            tabBarIcon: ({ tintColor, focused }) => (
                // <Icon name='terminal' size={25} color={Colors.white} />
                <Image
                    source={require('../assets/TabBarIcon/Learning_96px.png')}
                    style={{ width: 45, height: '90%', }}
                />
            ),

        }
    },

学习

Stack.navigationOptions

= ({ 导航 }) => {

    let tabBarVisible = false;

    let routeName = navigation.state.routes[navigation.state.index].routeName

    if (routeName == 'Learning') {
        tabBarVisible = true
    }

    return {
        tabBarVisible
    }
},

})

Answer 11

您还可以在屏幕内创建一个 Modal 并使其始终可见，如下所示：

const Example = () => {
  return(
    <ScrollView>
      <Modal animationType="slide" transparent={true} visible={true} >
          <View style={styles.modalExample}>
          </View>
      </Modal> 
    </ScrollView>
  )
}

然后设置样式：

const styles = StyleSheet.create({
  modalExample: {
    height:"100%",
    width:"100%",
    backgroundColor: "#000000",
  },
})

Answer 12

另一种方法是使用标签栏的高度来隐藏它。 这在使用 createMaterialTopTabNavigator 时是必需的，因为它没有 tabBarVisible 属性。 您可以使用全局状态变量（Redux 或 UseState），也可以使用类似于所选答案的东西，在其中跟踪当前活动的屏幕。

假设 'hideTab' 是一个布尔值。

const Tab = createMaterialTopTabNavigator();
...
<Tab.Navigator
   tabBarOptions={{style: {height: hideTab ? '0%' : null}}>

Answer 13

在 v5 中有多种方法： 1.根据特定的字符串/路由名称使用tabBarVisible选项

使用 useRoute() 钩子& setOptions({ tabBarVisible: false })

2.使用危险的GetParent()方法动态控制特定屏幕

navigation.dangerouslyGetParent()?.setOptions({ tabBarVisible: false })

滚动隐藏底部标签栏

const navigation = useNavigation();

const handleScroll = ({ nativeEvent: { contentOffset: { y = 0 }} }) => {
  navigation.dangerouslyGetParent()?.setOptions({ tabBarVisible: y <= 50 })
}

return (
  <ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
    ...
  </ScrollView>
)

3.对于简单的嵌套，您可以将“标签栏导航”传递给任何堆栈屏幕道具

// navigation -> is the bottomTab navigation instance
export default ({ navigation }) => {
  return (
    <Stack.Navigator screenOptions={screenOptions}>
      <Stack.Screen name="Trips">
        // add a new prop named tabNavigation={navigation}
        // you also have access to the stack navigation
        {(props) => <Trips tabNavigation={navigation} {...props} />}
      </Stack.Screen>
      <Stack.Screen name="Trip" component={Trip} />
    </Stack.Navigator>
  );
}

并使用第 2 点中的示例

tabNavigation?.setOptions({ tabBarVisible: false })

Answer 14

我通过这种方式实现了这一点。 首先是钩子：

import {useLayoutEffect} from 'react';
import {useNavigation, useRoute, getFocusedRouteNameFromRoute} from '@react-navigation/native';

export function useHiddenTabs (hiddenTabRoutesArray, fallbackRoute) {
  const navigation = useNavigation();
  const route = useRoute();

  useLayoutEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route) ?? fallbackRoute;
    navigation.setOptions({
      tabBarVisible: !hiddenTabRoutesArray.includes(routeName),
    })
  }, [navigation, route]);
}

然后用法：

import {getFocusedRouteNameFromRoute} from '@react-navigation/native';

const routesWithoutTabs = ['ScreenWithoutTabs'];

const StackComponent = ({navigation}) => {

  useHiddenTabs(routesWithHiddenTabs, 'FallbackRoute');

  return (
    <Stack.Navigator /* other props */>
      <Stack.Screen
        name='ScreenWithoutTabs'
        component={ScreenWithoutTabsComponent}
      />
    </Stack.Navigator>
  );
};

相应的文档

Answer 15

您可以使用useFocusEffect挂钩来检查屏幕是否聚焦，然后使用navigation.dangerouslyGetParent()隐藏导航器

这是我创建的自定义钩子：

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

const useHideTabBar = (navigation) => {

    useFocusEffect(
        React.useCallback(() => {

            // hide
            const parent = navigation.dangerouslyGetParent();
            parent.setOptions({
                tabBarVisible: false,
            });

            // reveal after changing screen
            return () =>
                parent.setOptions({
                    tabBarVisible: true,
                });

        }, []),
    );


};

export default useHideTabBar;

Answer 16

<Navigator initialRouteName="Home"}>
    <Screen name="Home" component={Home} />
    <Screen
        name="About"
        component={About}
        options={{ tabBarStyle: { display: 'none' } }}
    />
</Navigator>

Answer 17

这是我在项目中使用的解决方案。

我有一个底部标签导航器，有 2 条路线：主页和个人资料。 ProfileHomePage 路由带来堆栈导航 ProfileStackNavigation。

然后，在 ProfileStackNavigation 中，我有 ProfileHomePage 底部选项卡应该出现的位置，以及其他子页面，底部选项卡应该不可见。 我在该页面中添加了一个参数tabBarVisible: false 。

最后，在 MainTabNavigator ProfileHomePage 路由中，我添加了 navigationOptions 函数，用于测试当前路由是否有参数 tabBarVisible。

const ProfileStackNavigation = createStackNavigator(
  {
    ProfileHomePage: ProfileHomePage,
    AboutAppPage: {screen: AboutAppPage, params: {tabBarVisible: false}},
    DiaryPage: {screen: DiaryPage, params: {tabBarVisible: false}},
    FilesPage: {screen: FilesPage, params: {tabBarVisible: false}},
    NotificationsPage: {screen: NotificationsPage, params: {tabBarVisible: false}},
  },
  {
    initialRouteName: 'ProfileHomePage',
  },
);

const MainTabNavigator = createBottomTabNavigator(
  {
    HomePage: HomePage,
    ProfileHomePage: {
      screen: ProfileStackNavigation,
      navigationOptions: ({ navigation }) => {
        const {params = {}} = navigation.state.routes[navigation.state.index];
        const tabBarVisible = params.tabBarVisible === false ? params.tabBarVisible : true;
        return {
          tabBarVisible,
        }
      }
    },
  },
  {
    initialRouteName: 'HomePage',
    tabBarComponent: props => <AppFooterTab {...props} />,
  },
);

Answer 18

这里的另一个选择是添加另一个堆栈导航器作为选项卡导航器的父级，并将不需要选项卡导航器的屏幕放在那里。 这是 react navigation < 5 版本中的推荐方式

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  /* any other route you want to render under the tab bar */
});

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

const HomeStack = createStackNavigator({
  Tabs: TabNavigator,
  Details: DetailsScreen,
  /* any other route you want to render above the tab bar */
});

const AppNavigator = createSwitchNavigator({
  Auth: AuthScreen,
  Home: HomeStack,
});

Answer 19

试试这个代码，它会工作：

  const getTabBarVisibility = (route) => {
const routName = route.state
  ? route.state.routes[route.state.index].name
  : '';
if (routName == 'chat') {
  return false;
} else {
  return true;
}

};

Answer 20

import React, {useLayoutEffect} from "react";
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

const MainStackNavigator = ({navigation, route}) => {
    useLayoutEffect(() => {
        const routeName = getFocusedRouteNameFromRoute(route);
        if (routeName === 'Details') {
            navigation.setOptions({tabBarVisible: false});
        }else {
            navigation.setOptions({tabBarVisible: true});
        }
    }, [navigation, route])

Answer 21

react-navigation 库中提到的简单解决方案，您可以更改导航结构react-navigation-doc

Answer 22

反应原生 V6

我正在使用打字稿，我也遇到了这样的问题。 由于 tabBarVisible 选项不再可用，我改用 tabBarStyle 并将显示属性设置为“无”。

假设我有两个屏幕，主屏幕是选项卡式屏幕，另一个屏幕说侧屏，这是一个堆叠屏幕，我想在其中隐藏标签栏，然后我在堆叠屏幕导航器组件中执行此操作：

const setTabStyleVisibility = (shouldBeVisible: boolean) =>
shouldBeVisible
  ? ({
      tabBarStyle: { display: 'flex' },
    } as Partial<BottomTabNavigationOptions>)
  : ({
      tabBarStyle: { display: 'none' },
    } as Partial<BottomTabNavigationOptions>);

我有一个自定义按钮定义为：

<Button title={btnTitle} onPress={onPressHandler}/>

在主屏幕上，我有一个按钮导航到侧屏幕并通过将自定义 onPressedHandler 属性定义为自定义按钮来隐藏选项卡：

onPressHandler={() => {
    navigation.setOptions({
      ...setTabStyleVisibility(false),
    });
    navigation.navigate("Side");
  }}

然后我有一个按钮传递到下一个屏幕（侧屏幕），标签栏将在返回主屏幕时显示。 我将 onPressedHandler 设置为自定义按钮的自定义道具

onPressHandler={() => {
    navigation.setOptions({
      ...setTabStyleVisibility(true),
    });
    navigation.navigate("Home");
  }}

Answer 23

export const useHideTabsHook = () => {
const route = useRoute();
const navigation = useNavigation();
const tabHiddenRoutes = getHiddenRoutesForRoute(route.name);
useLayoutEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route);
    if (tabHiddenRoutes && tabHiddenRoutes.includes(routeName)) {
        navigation.setOptions({ tabBarStyle: { display: 'none' } });
    } else {
        navigation.setOptions({ tabBarStyle: { display: 'flex' } });
    }
}, [navigation, route, tabHiddenRoutes]);
};

编写自己的逻辑来获取。 每个选项卡中的路线getHiddenRoutesForRoute

const getHiddenRoutesForRoute = routeName => {
switch (routeName) {
    case 'tab1':
        return tab1HiddenRoutes;
    case 'tab2':
        return tab2HiddenRoutes;
    default:
        return null;
}
};

在每个选项卡堆栈中包含此挂钩。 这是使用 React-Navigation v6。

Answer 24

对于 Rect Navigation v6.x，我发现了 3 种不同的方法可以从某些屏幕中隐藏 tabBar。 以下脚本演示了这些方法中的每一个。 归功于这个问题的各种答案。

// ///////// 
import { getFocusedRouteNameFromRoute, } from "@react-navigation/native";

const ShiftUpdateEmployerStack = (params) => {
    // Method#1: Hides the tabBar on the screen(s), which satisfy a certain condition (or all screens), in a "stack"
    React.useLayoutEffect(() => {
        // (1.a) Hide the tabBar on all screens in this stack: 
        // params.navigation.setOptions({ tabBarStyle: {display: "none"} });

        // OR (1.b) Hide the tabBar on the screens, which satisfy a certain condition 
        const routeName = getFocusedRouteNameFromRoute(params.route);
        if (routeName === "EmployerMenuScreen") { // the screen, which you want to hide the tabBar on
            params.navigation.setOptions({ tabBarStyle: {display: "none"} });
        } else {
            params.navigation.setOptions({ tabBarStyle: {display: "flex"} });
        }
    }, [params.navigation, params.route]);
    
    const MyStack = createNativeStackNavigator();

    return (
        <MyStack.Navigator>
            <MyStack.Screen name="SiteListScreen" component={SiteListScreen}/>
        </MyStack.Navigator>
    );
};

// ///////// 
const MainNavigator = () => { 
    const MyNav = createBottomTabNavigator(); 

    return (
        <MyNav.Navigator 

            // Use a custom bottom tab bar, instead of the default one 
            tabBar={params => <CustomTabBarContent {...params} />}

            // Method#2: Hides the tabBar on some screen(s) 
            screenOptions={(params) => {
                return { 
                    tabBarStyle: { display: (params.route.name === "ListShiftEmployerScreen" ? "none" : "flex") }, 
                }; 
            }}
        >
            {/* Method#3: Hides the tabBar on all screens in the "stack" */}
            <MyNav.Screen name="InitialStack" component={InitialStack} options={{ tabBarLabel: "Home", tabBarStyle: {display: "none"}, }} />
        </MyNav.Navigator>
    );
}; 

// ///////// 
const CustomTabBarContent = ({ state, descriptors, navigation, }) => {
    // If the option (tabBarStyle: { display: "none" }) is used anywhere, the following couple of statements are required
    const focusedOptions = descriptors[state.routes[state.index].key].options;
    if (focusedOptions?.tabBarStyle?.display === "none") {
        return null;
    }

    return (
    <View style={{ flexDirection: "row" }}>
        {state.routes.map((route, index) => {
            // more code...
            // see https://reactnavigation.org/docs/bottom-tab-navigator 
        })}
    </View>
    );
}; 

Answer 25

只需添加屏幕选项对我有用

  tabBarButton: () => null,

Answer 26

在我的例子中，我有一个TabBar(Parent) ，里面有StackNavigator(Parent 2) ，然后是我的DrawerNavigator 。

这是在 react-navigation 6 上对我有用的解决方案：

import React from 'react';
import { useFocusEffect } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

const MyStack = ({ navigation, route }) => {    
  useFocusEffect(
      React.useCallback(() => {
        const parent = navigation.getParent();
        if (route.name === 'myRouteName')
          parent.setOptions({ tabBarStyle: { display: 'none' } });
        else parent.setOptions({ tabBarStyle: { display: 'flex' } });
        return () => {
          parent.setOptions({ tabBarStyle: { display: 'flex' } });
        };
      }, [navigation, route]),
    );

  return (
    <Drawer.Navigator>
        <Drawer.Screen name="myRouteName"/>
    </Drawer.Navigator>
  );
};

Answer 27

const AppStack = createStackNavigator({
  SplashScreen: {
    screen: SplashScreen,
    navigationOptions: {
      header: null,
    },
  },
  Home: Home,
  CarouselMap: CarouselMap,
  HeatMapComponent: HeatMapComponent,
});

Answer 28

实际上，根据文档的解释，最好深入思考并重新排列屏幕以将 Tabbar 屏幕收集到 TabStack 下方，并将其余部分隔离，尤其是您不想在其中包含 Tabbar 的屏幕，在导航下堆。

但是，如果您想在 TabStack 屏幕的某些子屏幕中隐藏 Tabbar，则以下代码将很有用：

import { useNavigation } from '@react-navigation/native';

const Account = () => {
  const { getParent } = useNavigation();

  useEffect(() => {
    const parent = getParent();

    parent?.setOptions({
      tabBarStyle: { display: 'none' },
    });

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

  return (
    <View>
      ~~~

我为它创建了一个有用的自定义钩子：

import { useEffect } from 'react';
import useNavigation from './useNavigation';

const useHideTabBar = () => {
  const { getParent } = useNavigation();

  useEffect(() => {
    const parent = getParent();

    parent?.setOptions({
      tabBarStyle: { display: 'none' },
    });

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

export default useHideTabBar;

Answer 29

这对我有用：

<BottomTab.Navigator
  screenOptions={{
    tabBarStyle: {
      display: isTabVisible ? 'flex' : 'none'
    }
  }}>

其中 isTabVisible 是一个全局状态变量。