参考：

http://www.bijishequ.com/detail/434067

简单的例子:

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

const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);

只是需要特别注意的是：

在screen用到的是navigationOptions这个设置项：

title - 可以作为头部标题headerTitle，或者Tab标题tabBarLabel

TabNavigatorConfig

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

通用的属性

TabBarTop - 在页面的顶部

TabBarBottom - 在页面的底部

tabBarPosition - Tab选项卡的位置，有 top 或 bottom两个值

swipeEnabled - 是否可以滑动切换Tab选项卡

animationEnabled - 点击Tab选项卡切换界面是否需要动画

lazy - 是否懒加载页面

initialRouteName - 初始显示的Tab对应的页面路由名称

order - 用路由名称数组来表示Tab选项卡的顺序，默认为路由配置顺序

paths - 路径配置

backBehavior - androd点击返回键时的处理，有initialRoute和none两个值

initailRoute - 返回初始界面

none - 退出

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

用于TabBarTop时：

activeTintColor - 选中的文字颜色

inactiveTintColor - 未选中的文字颜色

showIcon - 是否显示图标，默认显示

showLabel - 是否显示标签，默认显示

upperCaseLabel - 是否使用大写字母，默认使用

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：

底部的TabNavigator

效果：

问题：

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

这里需要设置这个属性。