使用react-navigation详解(二)--TabNavigator

tab选项卡的功能

(一)TabNavigator参数详解

const TabBarNavigator = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);

下面来详细介绍下两个参数：

RouteConfigs

同样还是配置路由，示例：

const TabRouteConfigs = {
    Home: {
        screen: Home,
        navigationOptions: ({navigation}) => ({
            title: '首页',
            tabBarIcon: ({focused, tintColor})=>(
                
            ),
        }),
    },
    Near: {
        screen: Near,
        navigationOptions: ({navigation}) => ({
            title: '附近',
            tabBarIcon: ({focused,tintColor})=>(
                
            ),
        }),
    },
    Order: {
        screen: Order,
        navigationOptions: ({navigation}) => ({
            title: '订单',
            tabBarIcon: ({focused,tintColor})=>(
                
            ),
        }),
    },
    Mine: {
        screen: Mine,
        navigationOptions: ({navigation}) => ({
            title: '我的',
            tabBarIcon: ({focused,tintColor})=>(
                
            ),
        }),
    }
};

NavigationOptions

看到上面例子中我们通过NavigationOptions来配置我们的tabBarItem，属性包括：
title: 标题
tabBarVisible: 是否可见
tabBarIcon: 配置图片，当然，完全可以不使用图片
tabBarLabel: 也是配置标题，只不过title既能配置tab的标题，也能配置navigation的标题

TabNavigatorConfig

参数说明：
tabBarComponent：默认两种方式，TabBarBottom和TabBarTop，可以通过如下代码导入import {TabBarBottom,TabBarTop} from 'react-navigation';，这两者的区别主要是样式和位置的区别，iOS上默认使用TabBarBottom，Android上默认使用TabBarTop。
tabBarPosition：配置tab的位置，top和bottom
swipeEnabled：是否可以滑动切换tab
animationEnabled：点击选项卡切换界面是否需要动画
lazy：是否懒加载界面，默认一次加载所有的界面，我们最好设置为true
tabBarOptions：tab的样式等配置
initialRouteName，第一次初始化哪个界面，默认初始化第一个。
order：tab排序，默认使用配置路由的顺序
paths：配置path
backBehavior：当Android点击返回键的时候，做的处理，initialRoute返回到初始化的界面，none退出应用
示例：

const TabNavigatorConfigs = {
    initialRouteName: 'Home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
    tabBarOptions: {
        activeTintColor: '#2562b4', // 文字和图片选中颜色
        // inactiveTintColor: '#999999', // 文字和图片默认颜色
        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
        indicatorStyle: {
            height: 0
        }, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？
        style: {
            backgroundColor: '#FFFFFF', // TabBar 背景色
        },
        labelStyle: {
            fontSize: 10, // 文字大小
        },
    },
};

tabBarOptions

这个参数主要配置样式，针对TabBarBottom和TabBarTop。

TabBarBottom:
activeTintColor: 选中的文字颜色
activeBackgroundColor: 选中的背景色
inactiveTintColor：未选中的文字颜色
inactiveBackgroundColor: 未选中的背景色
showLabel: 是否显示标题，默认显示
style: 定义item的样式
labelStyle: 标题的样式

上面的示例就是使用TabBarBottom样式写的。

TabBarTop:
activeTintColor: 选中的文字颜色
inactiveTintColor：未选中的文字颜色
showIcon: 是否显示图标，默认显示
showLabel: 是否显示标题，默认显示
upperCaseLabel: 使用大写字母
pressColor: 定义颜色，大于Android5.0的一种按压效果
pressOpacity: 按压下去的透明度，在iOS或者Android5.0之前
scrollEnabled: 是否能够滚动，类似于今日头条的标题头
tabStyle: 定义item的样式
indicatorStyle: 指示器的颜色
labelStyle: 文字的样式
iconStyle: 图标的样式
style: 定义tab的样式

示例：

tabBarOptions:{
    activeTintColor:'#008dcf',
    inactiveTintColor:'#333333',
    showIcon:false,
    showLabel:true,
    upperCaseLabel:false,
    labelStyle:{
        fontSize:14
    },
    indicatorStyle:'#008dcf',
    pressColor:'#e8e8e8',
    pressOpacity:0.8,
    scrollEnabled:true,
    tabStyle:{
        height:44
    }
}

(二)切换Tab方法

若要在某个界面切换tab，可使用方法：this.props.navigation.navigate('Home');