Question

我构建反应本机应用程序，我想让TabNavigator的tabBarComponent可见\在某些屏幕中不可见。

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


})

我试图做的是声明名称路由名称数组我希望在屏幕上显示时隐藏tabBar

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
    }


})

它有效，但是当屏幕改变它没有“构建”时的问题。再次使用tabNavigator，第一次加载应用程序时会调用tabNavigator，然后它不会更改。我正在寻找在屏幕改变时调用它的方法

Answer 1

配置tabBar时设置tabBar可见性不会动态更改行为。您必须在组件类中使用navigationOptions，并在安装屏幕时使用tabBarVisible来显示或隐藏tabBar。

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

    constructor() {
        super();
        this.state = { };
    }
};

反应原生有条件的tabBarComponent

1 个答案: