React-Navigation之TabNavigator 配置

TabNavigator 配置

React-Navigation的相关 文档可参考官网
本文所对应使用React-Native 版本是0.43
一下范例仅在android 模拟器上展示

由于自己也是刚刚开始接触React Native 加上react-navigation 的相关中文资料比较少，所以还有许多地方也不是太会用，这里暂作记录，不对的地方希望有人能够指出来，谢谢。

TabNavigator 范例结构

如上图为默认情况下的样式其中
- icon android 默认不显示
- tab bar 中有多个tab时会全部显示在屏幕中，无法左右滑动
- tab 是包含icon和label的部分
- 内容区域 为简单的文本本范例中的引入的Collection.js 和Other.js

TabNavigator API定义

TabNavigator(RouteConfigs, TabNavigatorConfig)

配置范例

相关配置意义详见备注：

/**
 * Created by wangyijin on 2017/5/6.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    Image
} from 'react-native';

import  {TabNavigator} from 'react-navigation'
import  Collection from '../pages/Collection'
import  Other from '../pages/Other'


export const MyScreenNabigator = TabNavigator(
    {
        Collection: {
            screen: Collection,
            navigationOptions: {
                tabBarLabel: '收藏',//标标签页上的提示文字
                title:'Collection', //英文状态下显示是大写，能和tabBarLabel有同样效果
                tabBarVisible:true,  //是否显示整个组建 但标签会显示部分
                tabBarIcon:({tintColor})=>(<Image style={{width: 24, height: 24}} source={require('../../res/images/my_collection.png')}/>)

            }
        },
        Other: {
            screen: Other,
            navigationOptions: {
                tabBarLabel: 'other0',//标标签页上的提示文字
                tabBarIcon:({tintColor})=>(<Image style={{width: 24, height: 24}} source={require('../../res/images/my_other.png')}/>)
            }
        },
        Other1: {
            screen: Other,
            navigationOptions: {
                tabBarLabel: 'other1',//标标签页上的提示文字
                tabBarIcon:({tintColor})=>(<Image style={{width: 24, height: 24}} source={require('../../res/images/my_other.png')}/>)
            }
        },
        Other2: {
            screen: Other,
            navigationOptions: {
                tabBarLabel: 'other2',//标标签页上的提示文字
                tabBarIcon:({tintColor})=>(<Image style={{width: 24, height: 24}} source={require('../../res/images/my_other.png')}/>)
            }
        },
        Other3: {
            screen: Other,
            navigationOptions: {
                tabBarLabel: 'other3',//标标签页上的提示文字
                tabBarIcon:({tintColor})=>(<Image style={{width: 24, height: 24}} source={require('../../res/images/my_other.png')}/>)
            }
        }

    }, {
        animationEnabled: true,//点击切换时标签页下的指示器是否有动画效果
        // tabBarComponent:TabBarBottom, //具体由内部实现
        tabBarPosition: 'top',//标签页的具体放置位置 android 默认为'top' iOS为'bottom'
        lazy: true,//是否懒加载标签页  true时首次点击跳转页面的时候会有空白过度页面显示
        swipeEnabled:true,//是否可以滑动左右拖动切换
        tabBarOptions: {
            // initialRouteName:  //不明白什么用
            // order:
            // paths:
            // backBehavior:'none'
            activeTintColor: '#63B8FF',//设置选中字体和图片颜色
            // activeBackgroundColor:'#f00',//选中的标签页背景颜色   没有什么效果
            inactiveTintColor: '#111',//未选中字体颜色
            // inactiveBackgroundColor:'#00f',  //未选中的标签页背景颜色   没有什么效果
            pressColor: '#ccc',//点击时水波纹颜色 android>5.0
            showLabel:true,//是否显示 标签页
            showIcon:true,//是否显示图片
            upperCaseLabel:false,//标签（英文）文字是否大写
            scrollEnabled:true, //多个时（超出屏幕）标签页是否可以左右滑动
            // pressOpacity: ios 有用
            //标签页文字区域样式
            labelStyle:{
                fontSize:17,//字体大小
                margin:0
                // backgroundColor:'red',  //文字的背景颜色
            },
            //整个标签页的样式
            style:{
                backgroundColor:'#fff',


            },
            //标签页图片显示区域样式
            iconStyle:{
                // backgroundColor:'blue',

            },
            //单个标签页选项的样式
            tabStyle:{
                // backgroundColor:'#ddd',
                // padding:0,//取消默认高度
            },
            //指示器样式
            indicatorStyle:{
                backgroundColor:'#53a8eF',
                height:3,

            }


        }
    }
);

如效果图中需要另外说明的的地方如下：
1，当设置lazy:true时会导致在第一次切换页面时滑动过程内容区域中有空白页面闪过，该现象在点击tab 的时候尤为明显，但这也有课能是模拟器性能的原因。
2，如果在tabStyle中设置了背景颜色比如：

tabStyle:{
      backgroundColor:'#ddd',      
         }

就会导致指示器无法正常展示。
3，tab bar 的高度可以试着尝试在各个style 中设置padding,margin,height的值来调整——部分区域设置有默认大小的padding和margin值