React Navigation 如何从堆栈导航中隐藏标签栏 [英] React Navigation how to hide tabbar from inside stack navigation

问题描述

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

I have the following stack navigation and screens:

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

我只想在 ProductDetailsS​​creen 中隐藏标签

I want to hide tabs only in 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 导航传递任何选项的问题

The problem that can't pass any options to Tab navigation from Stack Navigation

并非所有堆栈都只显示其中一个

推荐答案

以下代码解决了问题:

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

    let tabBarVisible = true;

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

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

    return {
        tabBarVisible,
    }
}

这是一个简单的方法，它适用于 4 和 5 版本

这篇关于React Navigation 如何从堆栈导航中隐藏标签栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！