React Navigation的简单使用（二）

上篇文章介绍了StackNavigator的简单使用，就是路由的进出栈，传参等操作，这次简单介绍一下TabNavigator的使用，类似于react-native-scrollable-tab-view的滑动选项卡的开源组件。

效果图如下所示：

tabnavigation.gif

1.安装组件

npm i --save react-navigation

2.引入组件

import { TabNavigator } from 'react-navigation';

3.定义tab选项卡组件

const TabContainer = TabNavigator(
  {
    Main: { screen: MainContainer },  // 首页
    Category: { screen: CategoryContainer },  // 标签
    Feedback: { screen: Feedback },   // 反馈
    About: { screen: About }   // 关于
  },
  {
    lazy: true, 
    tabBarPosition: 'bottom',  
    tabBarOptions: {
      activeTintColor: '#3e9ce9',    
      inactiveTintColor: '#999999',   
      showIcon: true,        
      style: {    
        backgroundColor: '#fff'
      },
      indicatorStyle: {    
        opacity: 0
      },
      tabStyle: {   
        padding: 0
      }
    }
  }
);

和导航StackNavigator一样，声明组件的结构为：

const TabContainer = TabNavigator(
    {
        // 所要展示的组件
    },
    {
        // 配置项
    }
)

4.属性详解

1.TabNavigator整体属性配置

属性	描述
tabBarPosition	标签栏的位置可以是“顶部”或“底部” : 'top' or 'bottom'
swipeEnabled	是否允许在标签之间进行滑动
animationEnabled	是否在更改标签时动画
lazy	标签是否懒加载
tabBarOptions	配置标签栏，见下文
initialRouteName	第一次加载时初始标签路由的routeName
order	定义选项卡顺序的routeNames数组
backBehavior	后退按钮是否会使Tab键切换到初始选项卡？如果是，设置为initialRoute，否则为none。默认为initialRoute

2.tabBarOptions配置 （==IOS==）

属性	描述
activeTintColor	活动标签的标签和图标颜色
activeBackgroundColor	活动标签的背景颜色
inactiveTintColor	非活动标签的标签和图标颜色
inactiveBackgroundColor	非活动标签的背景颜色
showLabel	是否显示标签，默认为true
style	标签栏的样式对象
labelStyle	标签标签的样式对象
tabStyle	标签的样式对象

示例代码：

tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  },
}

3.tabBarOptions配置 （==Android==）

属性	描述
activeTintColor	活动标签的标签和图标颜色
inactiveTintColor	非活动标签的标签和图标颜色
showIcon	是否显示标签的图标，默认为false
showLabel	是否显示标签，默认为true
upperCaseLabel	是否使标签大写，默认为true
pressColor	按压标签的颜色纹理（Android> = 5.0 only）
pressOpacity	按压标签的不透明度（iOS和Android <5.0 only）
scrollEnabled	是否启用可滚动选项卡
style	标签栏的样式对象
labelStyle	标签标签的样式对象
iconStyle	图标样式
tabStyle	标签的样式对象
indicatorStyle	标签指示器的样式对象（选项卡底部的行），就是每个选项卡下面的闲，默认是黄色的

4.屏幕导航选项(Screen Navigation Options)

==就是在具体选项卡组件中需要配置的属性==

比如上面gif图中，反馈组件的内部写法：

static navigationOptions = ({ navigation }) => ({
        title: '建议',
        tabBarIcon: ({ tintColor }) => (
            <Icon name="md-thumbs-up" size={25} color={tintColor} />
        ),
        headerRight:(
            <Icon.Button
                name="md-checkmark"
                backgroundColor="transparent"
                underlayColor="transparent"
                activeOpacity={0.8}
                onPress={()=>navigation.state.params.handleback()}
            />
        )
});

属性	描述
title	headerTitle和tabBarLabel的通用标题，即顶部和底部选项卡通用的
tabBarVisible	True或false显示或隐藏选项卡栏，如果未设置，则默认为true
tabBarIcon	图标组件元素
tabBarLabel	显示在标签的标题，可以自定义组件或者直接用上面的title