响应本机有条件可见的选项卡栏组件

Question

我构建了反应原生应用程序，我想使TabNavigator的tabBar组件在某些屏幕中可见\不可见。

    const Tabs = TabNavigator('MainTabs',
{
    NestedNavigatorStack: {
        screen: Home,
    },
    Search: { screen: Search },
    Cart: { screen: Cart },
    WishList: { screen: WishList },
    Profile: { screen: Profile },
}, {
    initialRouteName: 'NestedNavigatorStack',
    lazy: false,
    animationEnabled: true, 
    tabBarPosition: 'bottom',
    tabBarComponent: TabBarHeader,
    navigationOptions :{
        tabBarVisible: true //TODO: change dinmaclly :hideTabBarComponents.includes(NavigationStore.CurrentRoute)
    }

})

我试图做的是声明名称路由名称数组，我想在屏幕上时隐藏选项卡栏

export const hideTabBarComponents = [
    'Search',
    'Cart',
    'Profile',
    'WishList'
]

然后制作条件(当包含返回 true 时，所以我用 ！true 隐藏它(

 navigationOptions :{
    tabBarVisible: !hideTabBarComponents.includes(NavigationStore.CurrentRoute)
}

到

    const Tabs = TabNavigator('MainTabs',
{
    NestedNavigatorStack: {
        screen: Home,
    },
    Search: { screen: Search },
    Cart: { screen: Cart },
    WishList: { screen: WishList },
    Profile: { screen: Profile },
}, {
    initialRouteName: 'NestedNavigatorStack',
    lazy: false,
    animationEnabled: true, 
    tabBarPosition: 'bottom',
    tabBarComponent: TabBarHeader,
    navigationOptions :{
        tabBarVisible: hideTabBarComponents.includes(NavigationStore.CurrentRoute) // the condition
    }

})

它可以工作，但是当屏幕更改时的问题

不是再次"构建"选项卡导航器，当应用程序首次加载时调用一次选项卡导航器，然后它不会更改。我正在寻找在屏幕更改时调用它的方法

Answer 1

配置 tabBar 时设置 tabBar 可见性不会动态更改行为。您必须在组件类中使用导航选项，并在挂载屏幕时使用 tabBarVisible 来显示或隐藏选项卡栏。

class Screen1 extends Component {
   static navigationOptions = ({ navigation }) => {
        return {
            title: 'Screen1',
            tabBarVisible: false,
        }
    };
    constructor() {
        super();
        this.state = { };
    }
};