react-navigation的TabNavigator

简单的例子:

从使用结构上来看，它的整体使用结构和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

小技巧

小技巧引自此处

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