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仅仅十个。所以难度不大，用上以前写的页面做不同场景，不到半小时你就应该感受到它的简单和强大。
来一张截图：
