TabNavigator是移动端常用的一种导航组件,目前react-navigation提供了四种创建tab-navi的方法
createTabNavigator(RouteConfigs, TabNavigatorConfig); //已废弃，官方推荐使用后三种方法
createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);
createMaterialBottomTabNavigator(RouteConfigs, TabNavigatorConfig);
createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);
bottom-tab：简单的底部标签导航栏，页面使用懒加载。
material-tab: material-design 风格的导航栏（比较酷炫），bottom／top分别是底部导航栏和顶部导航栏，页面使用懒加载。( 使用material-tab 需要安装react-navigation-material-bottom-tabs库)
接下来介绍一下RouteConfigs和TabNavigatorConfig：
RouteConfigs个人的理解是一个json格式的路由表，里面配置了所有需要注册进路由的页面,下面请看官网示例：
createTabNavigator({
// 对每一个需要加入路由的页面，都需要添加一个配置对象
Profile: {
// `ProfileScreen` 是一个React组件，会作为页面的主体
screen: ProfileScreen,
// 可选项: 当使用 deep linking 或者 在web app中使用react-navigation时，需要用到path属性。
path: 'people/:name',
// 可选项，重写navigationOptions,navigationOptions属性在本文后面进行讲解
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.name}'s Profile'`,
}),
},
...MyOtherRoutes,
});
TabNavigatorConfig在bottom-tab中被称为BottomTabNavigatorConfig，请看下面常用属性示例：
createTabNavigator(RouteConfigs, {
//可选项，重写tab bar
tabBarComponent: <CustomTabBar/>,
tabBarOptions: {
activeTintColor:'#fff', // label 和 icon 选中状态的颜色
activeBackgroundColor: '#fff', // tab 选中状态背景色
inactiveTintColor: '#909090', // label 和 icon 非选中状态的颜色
inactiveBackgroundColor: '#909090', // tab 非选中状态背景色
showLabel: true, //tab是否显示label，默认true
showIcon：true, //tab是否显示icon，默认true
style:{...}, //tab style
labelStyle:{...},//tab label style
tabStyle:{...}, //tab bar style
}
})
navigationOptions
下面针对navigationOptions进行讲解：
我们可以通过navigationOptions来配置导航页面该如何显示，例如header title、tab icon等等。
注意：You can only modify navigation options for a navigator from one of its screen components. This applies equally to navigators that are nested as screens.(只能通过导航页面去修改navigationOptions)
添加navigationOptions有三种方式：
1.直接写在组件内部,这种方式十分简单，适用于非嵌套使用的情况，或者用于嵌套使用的内部导航页配置
class A extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home!',
};
// etc..
}
class B extends React.Component {
static navigationOptions = {
tabBarLabel: 'Settings!',
};
// etc..
}
let HomeStack = createStackNavigator({ A });
let SettingsStack = createStackNavigator({ B });
export default createBottomTabNavigator({
HomeStack,
SettingsStack,
});
2.在导航构造函数中进行配置 & 3.通过属性进行设置,这两种情况着重介绍一下，请看下列示范代码：
let NewsStack = createStackNavigator({ NewsScreen }, { //资讯
navigationOptions: {
title: TAB_NAVI_NAME[2],
headerStyle: {
backgroundColor: TAB_NAVI_HEADER_BGCOLOR
},
headerTintColor: HEADER_TINT_COLOR
}
});
NewsStack.navigationOptions = {
tabBarLabel: TAB_NAVI_NAME[2],
tabBarIcon: iconMake(TAB_ICON_KEY_STR[2])
};
NewsStack是一个stackNavi，只有NewScreen页面，在createStackNavigator内部配置了一个navigationOptions对象，因为这个navigationOptions是在stackNavi的构造函数内部配置的，因此这个是stackNavi的配置项。那么NewsStack.navigationOptions这行代码是做什么用的呢？在后续代码中我要将这个stackNavi嵌套在tabNavi中使用，这是用来配置这个stackNavi在tabNavi中的显示效果的。这个问题的官方阐述
