簡介
兩個TabBarIOS和TabBarIOS.Item組件可以實現(xiàn)頁面Tab切換的功能，Tab頁面切換的架構(gòu)在應用開發(fā)中還是非常常見的.如:騰訊QQ,淘寶,美團外賣等等
TabBarIOS.Item
2.1.屬性
1.View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)
2.badge string,number 在圖標的右上方顯示小紅色氣泡折剃，顯示信息
3.icon Image.propTypes.source Tab按鈕自定義的圖標跋涣，如果systemicon屬性被定義了移宅，那么該屬性會被忽略
4.onPress function 當Tab按鈕被選中的時候進行回調(diào)铜靶，你可以設置selected={true}來設置組件被選中
5.selected bool 該屬性標志子頁面是否可見，如果你看到一個空白的內(nèi)容頁面咏连，那么你很有可能忘記了選中任何的一個頁面標簽Tab
6.selectedIcon Image.propTypes.source 設置當Tab按鈕被選中的時候顯示的自定義圖標敏弃，如果systemIcon屬性被設置了卦羡，那么該屬性會被忽略。如果定義了icon屬性麦到，但是當前的selectedIcon屬性沒有設置绿饵，那么該圖標會被設置成藍色
7.style 設置樣式風格，繼承View的樣式各種風格
8.systemIcon enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated') 這些圖標為系統(tǒng)預定義的圖標瓶颠，如果你使用這些圖標拟赊，那么你上面設置的標題，選中的圖標都會被這些系統(tǒng)圖標所覆蓋粹淋。
- title string 在Tab按鈕圖標下面顯示的標題信息吸祟，如果你設置了SystemIcon屬性瑟慈，那么該屬性會被忽略
TabBarIOS
3.1.屬性
1.View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)
2.barTintColor color 設置tab條的背景顏色
3.style 繼承View的所有風格樣式
4.tintColor 當前被選中圖標的顏色
5.translucent bool 設置Tab欄是不是半透明的效果
使用實例
上面我們主要對TabBarIOS以及TabBarIOS.Item組件做了相關(guān)講解介紹，下面我們針對該兩個組件看一下具體使用實例屋匕，以下代碼經(jīng)官方實例修改而來葛碧，具體代碼如下:
/**
* Sample React Native App
*
* @iostaoge
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TabBarIOS,
} from 'react-native';
class iostaoge extends Component {
constructor(props){
super(props);
this.state={
selectedTab: '歷史',
notifCount: 0,
presses: 0,
};
}
//進行渲染頁面內(nèi)容
_renderContent(color: string, pageText: string, num?: number) {
return (
<View style={[styles.tabContent, {backgroundColor: color}]}>
<Text style={styles.tabText}>{pageText}</Text>
<Text style={styles.tabText}>第 {num} 次重復渲染{pageText}</Text>
</View>
);
}
render() {
return (
<View style={{flex:1}}>
<Text style={styles.welcome}>
iOSTaoge React-Native Tabar-iOS
</Text>
<TabBarIOS
style={{flex:1,alignItems:"flex-end"}}
tintColor="white"
barTintColor="darkslateblue">
<TabBarIOS.Item
title="自定義"
icon={require('./images/flux.png')}
selected={this.state.selectedTab === '自定義'}
onPress={() => {
this.setState({
selectedTab: '自定義',
});
}}
>
{this._renderContent('#414A8C', '自定義界面')}
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="history"
selected={this.state.selectedTab === '歷史'}
badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
onPress={() => {
this.setState({
selectedTab: '歷史',
notifCount: this.state.notifCount + 1,
});
}}
>
{this._renderContent('#783E33', '歷史記錄', this.state.notifCount)}
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="downloads"
selected={this.state.selectedTab === '下載'}
onPress={() => {
this.setState({
selectedTab: '下載',
presses: this.state.presses + 1
});
}}>
{this._renderContent('#21551C', '下載頁面', this.state.presses)}
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
}
const styles = StyleSheet.create({
tabContent: {
flex: 1,
alignItems: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
marginTop: 20,
},
tabText: {
color: 'white',
margin: 50,
},
});
AppRegistry.registerComponent('iostaoge', () => iostaoge);
效果圖:
Demo源碼下載: http://pan.baidu.com/s/1cytotg 密碼: rue7
