react-navigation 之 TabNavigator 总结分享

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: ,
  
  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中的显示效果的。这个问题的官方阐述