3.4.1 createMaterialTopTabNavigator 介绍

createMaterialTopTabNavigator 和 createBottomTabNavigator 使用方式类似，专门用来实现顶部标签栏的。

参考图3-3，我们需要额外创建品牌界面，src/pages/BrandPage.js，代码参考其他页面。

createMaterialTopTabNavigator 同样接受两个参数，一个是路由的配置，另一个参数可以省略，用来定义标签栏的配置。修改 App.js 代码，参考代码片段 3-4-1 。

const CategoryTab = createMaterialTopTabNavigator({
    CategoryPage: {
        screen: CategoryPage,
        navigationOptions: {
            tabBarLabel: '品类'
        }
    },
    BrandPage: {
        screen: BrandPage,
        navigationOptions: {
            tabBarLabel: '品牌'
        }
    }
});
const MyTab = createBottomTabNavigator({
       // ...

        CategoryTab: {
            screen: CategoryTab, // 合并品类和品牌两个页面
            navigationOptions: {
                tabBarLabel: '分类',
                tabBarIcon: ({focused, tintColor}) => (
                    <Icon name={`ios-apps${focused ? '' : '-outline'}`} size={25} color={tintColor}/>
                )
            }
        }
    }, {
       // ...
    }
);

代码片段3-4-1

通过 createMaterialTopTabNavigator 创建带顶部标签的组件，里面配置了品类和品牌两个页面，tabBarLabel 表示顶部标签的文字。

createMaterialTopTabNavigator 把两个页面组合在一起并添加到了 createBottomTabNavigator 中。当前项目路由有多层嵌套，参考图3-4所示。

图3-4 页面路由

运行下当前代码，效果图参考图3-5。 图3-5 运行结果