TabBar 詳解
創(chuàng)建文檔時(shí)間：2016.3.22-15:00
作者：三月懶驢
使用平臺(tái)：Mac
作用
TabBar是一個(gè)APP的標(biāo)配。在現(xiàn)在手機(jī)越來(lái)越大的情況下，位處最低的TabBar相比位處左上角的返回鍵有著更大的作用。而官方只提供了IOS的TabBar。相對(duì)很多公司來(lái)說(shuō)，都是一套設(shè)計(jì)做兩個(gè)系統(tǒng)的APP的，所以。我們?cè)谠敿?xì)講解這個(gè)RN 原生的TarBar之外，還會(huì)在網(wǎng)上選取一個(gè)比較好的安卓的TarBar來(lái)嘗試一下。（留坑?。?/p>
代碼
//老規(guī)矩在component下新建一個(gè)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這里挖過(guò)來(lái)的。改成@2x就好了。也就是說(shuō)，這個(gè)icon的大小是28*28左右會(huì)比較好看。
以下來(lái)講解一下TabBar / TabBar.Item的一些參數(shù)。
TabBar
barTintColor: 標(biāo)簽欄的背景顏色。
tintColor:當(dāng)前被選中的標(biāo)簽圖標(biāo)的顏色。
translucent:決定標(biāo)簽欄是否需要半透明化。(true / false)
TabBar.Item
badge:在圖標(biāo)右上角顯示一個(gè)紅色的氣泡
icon:給當(dāng)前標(biāo)簽指定一個(gè)自定義的圖標(biāo)。如果定義了systemIcon屬性， 這個(gè)屬性會(huì)被忽略。
onPress:當(dāng)此標(biāo)簽被選中時(shí)調(diào)用
selected:這個(gè)屬性決定了子視圖是否可見(jiàn)
selectedIcon:當(dāng)標(biāo)簽被選中的時(shí)候顯示的自定義圖標(biāo)。如果定義了systemIcon屬性，這個(gè)屬性會(huì)被忽略。如果定義了icon而沒(méi)定義這個(gè)屬性，在選中的時(shí)候圖標(biāo)會(huì)染上藍(lán)色。
systemIcon ：一些預(yù)定義的系統(tǒng)圖標(biāo)。注意如果你使用了此屬性，標(biāo)題和自定義圖標(biāo)都會(huì)被覆蓋為系統(tǒng)定義的值。
systemIcon('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated')
title:在圖標(biāo)下面顯示的標(biāo)題文字。如果定義了systemIcon屬性，這個(gè)屬性會(huì)被忽略。
小結(jié)
其實(shí)整個(gè)TabBar加起來(lái)的API僅僅十個(gè)。所以難度不大，用上以前寫(xiě)的頁(yè)面做不同場(chǎng)景，不到半小時(shí)你就應(yīng)該感受到它的簡(jiǎn)單和強(qiáng)大。
來(lái)一張截圖：
