TabBar 详解

创建文档时间：2016.3.22-15:00
作者：三月懒驴
使用平台：Mac

作用

TabBar是一个APP的标配。在现在手机越来越大的情况下，位处最低的TabBar相比位处左上角的返回键有着更大的作用。而官方只提供了IOS的TabBar。相对很多公司来说，都是一套设计做两个系统的APP的，所以。我们在详细讲解这个RN 原生的TarBar之外，还会在网上选取一个比较好的安卓的TarBar来尝试一下。（留坑！）

代码

//老规矩在component下新建一个Tab.js
'usr strict'

import React from 'react-native'
import Login from './login'
import Lesson from './lesson_1'
import Lesson_0 from './lesson_0'

let {Component,View,Text,StyleSheet,TabBarIOS} =  React
let Item = TabBarIOS.Item

let Icon = {
    article:require('../image/icon_nav_article.png'),
    msg:require('../image/icon_nav_msg.png'),
    setting:require('../image/icon_nav_cell.png'),
}

class Tab extends Component{
    constructor(props){
        super(props)
        this.state = {
            selectItem:0,
        }
    }
    render(){
        return(
            <View style={styles.body}>
                <TabBarIOS
                    barTintColor='#fff'
                    tintColor='darkslateblue'
                >
                    <Item
                        title='资讯'
                        icon = {Icon.article}
                        style={styles.body}
                        selected = {this.state.selectItem === 0}
                        onPress = {()=>{
                            this.setState({selectItem:0})
                        }}
                    >
                        <Login />
                    </Item>
                    <Item
                        title='已读'
                        icon = {Icon.msg}
                        selected = {this.state.selectItem === 1}
                        badge = {1}
                        onPress = {()=>{
                            this.setState({selectItem:1})
                        }}
                    >
                        <Lesson />
                    </Item>
                    <Item
                        title='更多'
                        icon = {Icon.setting}
                        selected = {this.state.selectItem === 2}
                        onPress = {()=>{
                            this.setState({selectItem:2})
                        }}
                    >
                        <Lesson_0 />
                    </Item>
                </TabBarIOS>
            </View>
        );
    }
}

const styles = {
    body:{
        flex:1
    }
}

export default Tab

三张图片是在weui这里挖过来的。改成@2x就好了。也就是说，这个icon的大小是28*28左右会比较好看。
以下来讲解一下TabBar / TabBar.Item的一些参数。

TabBar

barTintColor: 标签栏的背景颜色。
tintColor:当前被选中的标签图标的颜色。
translucent:决定标签栏是否需要半透明化。(true / false)

TabBar.Item

badge:在图标右上角显示一个红色的气泡
icon:给当前标签指定一个自定义的图标。如果定义了systemIcon属性， 这个属性会被忽略。
onPress:当此标签被选中时调用
selected:这个属性决定了子视图是否可见
selectedIcon:当标签被选中的时候显示的自定义图标。如果定义了systemIcon属性，这个属性会被忽略。如果定义了icon而没定义这个属性，在选中的时候图标会染上蓝色。
systemIcon ：一些预定义的系统图标。注意如果你使用了此属性，标题和自定义图标都会被覆盖为系统定义的值。
systemIcon('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated')
title:在图标下面显示的标题文字。如果定义了systemIcon属性，这个属性会被忽略。

小结

其实整个TabBar加起来的API仅仅十个。所以难度不大，用上以前写的页面做不同场景，不到半小时你就应该感受到它的简单和强大。

来一张截图：

屏幕快照 2016-03-22 下午5.42.00.png