React Navigation如何从堆栈导航中隐藏tabbar

Question

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

export const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Categories: CategoriesScreen,
    Products: ProductsScreen,
    ProductDetails: 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)

        }),
    }
);

无法将任何选项传递到“堆栈导航”选项卡导航的问题

并非所有堆叠屏幕都只有其中一个

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

这就是我的方式。选择要隐藏选项卡栏的堆栈。您可以根据索引选择它。

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

这是React导航的docs的链接

Answer 3

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

defaultNavigationOptions: {
  tabBarVisible: false,
},