ReactNavigation在子路由中隐藏Tab分栏条（二）

在实际开发过程中，APP的页面肯定不止一个，这就涉及到了多个页面的跳转，其中比较核心的两种方式为：Navigation堆栈和Tab分栏。但是在点击Navigation跳转进入子路由的时候，我们会发现Tab分栏条并没有被隐藏，那我们该如何处理呢？其实在官网上给我们提供了两种方式。

方式一：

const HomeS = createStackNavigator({
    Home: HomeScreen,
    Detail: DetailScreen,
}, {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
        title: 'Home',
    },
});

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

    return {
        tabBarVisible,
    };
};

const DetailS = createStackNavigator({
    Home: HomeScreen,
    Detail: DetailScreen,
}, {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
        title: 'Detail',
    },
});

const Tabs = createBottomTabNavigator({
    HomeS: HomeS,
    DetailS: DetailS
});

export default createAppContainer(Tabs);

这种搭建路由结构的方式就很常规了，创建了两个Navigation堆在放在Tab分栏中，然后将Tab分栏放在APP容器中。至于能够在跳转进入子路由时隐藏条就是利用了navigationOptions中的一个属性：tabBarVisible，将其设置为false时就可以隐藏Tab分栏条了。
但是这种方式有个明天的缺陷，就是在进入子路由时，由于分栏条向下隐藏会将主页面的布局向下拉伸，导致页面会有跳动的现象。

方式二：

const HomeS = createStackNavigator({
    HomeS: HomeScreen,
});

const DetailS = createStackNavigator({
    DetailS: DetailScreen,
});

const TabS = createBottomTabNavigator({
    HomeS: HomeS,
    DetailS: DetailS
});

const MainS = createStackNavigator({
    TabS: TabS,
    SettingS: SettingScreen,
    Detail: DetailScreen
}, {
    defaultNavigationOptions: {
        //隐藏顶部导航条
        header: null,
    },

});

export default createAppContainer(MainS);

这种方式就比较新颖一些，它的整体路由结构为：

路由结构.jpeg

实现步骤：

使用在Tab分栏中显示的主页面创建对应的Navigation堆栈（StackA，StackB），这样做的原因是想要每个页面都有一个独立的顶部导航条。
将创建的堆栈放在Tab分栏(TabC)中。
以分栏为主页面创建一个Navigation堆栈（StackMain），并将所有页面的子路由放在这个堆栈中。

通过以上操作会发现，在每个主页面都会有两个顶部导航条，并且最上面的导航条是同一个导航条，这是因为StackMain包含TabC，而TabC包含StackA和StackB，这个时候StackMain和StackA的导航条就都会被显示出来，而最顶部的导航条就是StackMain的，所以需要将StackMain的导航条在主页面显示时隐藏，此时可以将StackMain的defaultNavigaionOptions中的header设置为null就可以了，并且在子路由需要显示导航条时，把对应页面的navigationOptions中的header设置为Headers.prototype.header就可以了。

最后编辑于：2019.06.21 17:55:53