简单的例子:

从使用结构上来看，它的整体使用结构和StackNavigator相同。

export const AppTabNavigator = TabNavigator(TabRouteConfigs,TabNavigatorConfigs);

TabNavigatorConfig

TabNavigator有两种模式，一种是顶部的，一种是底部的。所以这里的TabNavigatorConfig有两种模式的配置TabBarBottom和TabBarTop两个值。

通用的属性

TabBarTop - 在页面的顶部
TabBarBottom - 在页面的底部
tabBarPosition - Tab选项卡的位置，有 top 或 bottom两个值
swipeEnabled - 是否可以滑动切换Tab选项卡
animationEnabled - 点击Tab选项卡切换界面是否需要动画
lazy - 是否懒加载页面,默认false,推荐改成true哦
initialRouteName - 初始显示的Tab对应的页面路由名称
order - 用路由名称数组来表示Tab选项卡的顺序，默认为路由配置顺序
paths - 路径配置
backBehavior - androd点击返回键时的处理，有initialRoute和none两个值
- initailRoute - 返回初始界面
- none - 退出

==tabBarOptions - Tab配置属性==，用在TabBarTop和TabBarBottom时有些属性不一致：

用于TabBarTop时：

activeTintColor - 选中的文字颜色
inactiveTintColor - 未选中的文字颜色
showIcon - 是否显示图标，默认关闭
showLabel - 是否显示标签，默认开启
upperCaseLabel - 是否使用大写字母，默认true
pressColor - android 5.0以上的MD风格波纹颜色
pressOpacity - android 5.0以下或者iOS按下的透明度
scrollEnabled - 是否可以滚动
tabStyle - 单个Tab的样式
indicatorStyle - 指示器的样式
labelStyle - 标签的样式
iconStyle - icon的样式
style - 整个TabBar的样式

用于TabBarBottom时：

activeTintColor - 选中Tab的文字颜色
activeBackgroundColor - 选中Tab的背景颜色
inactiveTintColor - 未选中Tab的的文字颜色
inactiveBackgroundColor - 未选中Tab的背景颜色
showLabel - 是否显示标题，默认显示
style - 整个TabBar的样式
labelStyle - 标签的样式
tabStyle - 单个Tab的样式

顶部的TabNavigator：

WX20181112-154514.png

底部的TabNavigator

WX20181112-155148.png

问题：

上面的使用会遇到个问题：就是点击手机的back键是回到第一个tab1，然后再点击back才会退出当前页面的栈。

这里需要设置这个属性。

WX20181112-155321.png

小技巧

小技巧引自此处

去掉安卓下的下划线，设置：tabBarOptions => indicatorStyle:{ height: 0 }；
底部导航在导航最上方添加一条分割线，设置：tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc'；
导航安卓图标和文字间隙比较大，手动调整小设置：tabBarOptions => labelStyle => margin: 0；

友情提示：

运行会报警告warning Method 'jumpToIndex' is deprecated. Please upgrade your code to use jumpTo instead 'Change your code from 'jumpToIndex(1)' to 'jumpTo('...')

原因：TabNavigator已经被遗弃了，使用createBottomTabNavigator或者createMaterialTopTabNavigator，对应的标签栏位置。

以下代码使用最新的createBottomTabNavigator组件，该组件不需要再对其进行位置和图标是否显示的属性设置，非常简单（推荐使用）

import { createBottomTabNavigator } from 'react-navigation';
// import HomePage from '../pages/HomePage'
import Page1 from '../pages/Page1'
import Page2 from '../pages/Page2'
import Page3 from '../pages/Page3'
import React from 'react';
import {Button,Image} from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
export const AppTabNavigator = createBottomTabNavigator({
    Page1:{
        screen:Page1,
        navigationOptions: {
            tabBarLabel: 'Page1',
            tabBarIcon: ({ tintColor, focused }) => (
              <Ionicons
                name={focused ? 'ios-add' : 'ios-add-circle'}
                size={26}
                style={{ color: tintColor }}
              />
            ),
            // //显示的图片
            // tabBarIcon: ({tintColor}) => (
            //     <Image
            //         source={require('../images/ic_home.png')}
            //         style={[{height: 24, width: 24}, {tintColor: tintColor}]}
            //     />
            // ),
        }     
    },
    Page2:{
        screen:Page2,
        navigationOptions:{
            tabBarLabel:'Page2',
            tabBarIcon:({tintColor,focused}) =>(
                <Ionicons
                    name={focused ? 'ios-add' : 'ios-add-circle'}
                    size={26}
                    style={{ color: tintColor }}
                />
            )
            // tabBarIcon: ({tintColor}) => (
            //     <Image
            //         source={require('../images/ic_shop_car.png')}
            //         style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            // ),
        }
    },
    Page3:{
        screen:Page3,
        navigationOptions:{
            tabBarLabel:'Page3',
            tabBarIcon:({tintColor,focused}) =>(
                <Ionicons
                    name={focused ? 'ios-add' : 'ios-add-circle'}
                    size={26}
                    style={{ color: tintColor }}
                />
            )
            // tabBarIcon: ({tintColor}) => (
            //     <Image
            //         source={require('../images/ic_type.png')}
            //         style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            // ),
        }
    }
});

效果如图：

image