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 导航

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

原文由 Ahmad Abdullah 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要在其中一个屏幕中隐藏选项卡栏，这适用于 React Navigation v4 ：

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

    let tabBarVisible = true;

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

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

    return {
        tabBarVisible,
    }
}

对于 v5 和 v6，请 在此处 查看@Chathuranga Kasthuriarachchi 的回答

原文由 Ahmad Abdullah 发布，翻译遵循 CC BY-SA 4.0 许可协议

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'}});
}

原文由 Chathuranga Kasthuriarachchi 发布，翻译遵循 CC BY-SA 4.0 许可协议