React Native 之TabBarIOS
前言
-
學習本系列內容需要具備一定 HTML 開發基礎,沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習
-
本人接觸 React Native 時間并不是特別長,所以對其中的內容和性質了解可能會有所偏差,在學習中如果有錯會及時修改內容,也歡迎萬能的朋友們批評指出,謝謝
TabBarIOS 組件簡介
- 目前的APP內,大部分都是選項與選項之間切換,比如:微信、微博、QQ空間…,在iOS中,我們可以通過TabItem類進行實現,那么,在React Native中,我們可以通過TabBarIOS和TabBarIOS.Item組件來實現選項卡切換效果,大家可以看到后面帶有IOS,所以這個組件不支持Android,當然后面我們會通過自定義該組件來滿足實際開發需求
- 當然,本章涉及到了 TabBarIOS組件 ,那么必不可少的,肯定需要與 TabBarIOS.Item 來搭配使用,廢話不多說,先來看它們各自都擁有哪些屬性
TabBarIOS 常見屬性
-
繼承了View的所有屬性
-
barTintColor:標簽欄的背景顏色
-
tintColor:當前被選中的標簽圖標顏色
-
translucent:bool值,決定標簽欄是否需要半透明化
TabBarIOS.Item 常見屬性
-
繼承了View的所有屬性
-
badge:圖標右上角顯示的紅色角標
-
icon:給當前標簽指定一個自定義圖標(如果定義了 systemIcon屬性 這個屬性會被忽略)
-
onPress:點此標簽被選中時調用,你應該修改過組件的狀態使 selected={true}
-
selected:這個屬性決定了子視圖是否可見,如果你看到一個空白的頁面,很可能是沒有選中任何一個標簽
-
selectedIcon:當標簽被選中的時候顯示的自定義圖標(如果定義了systemIcon屬性,這個屬性會被忽略,如果定義了icon而沒定義這個屬性,在選中的時候圖標會被染上藍色)
- systemIcom:一些預定義的系統圖標(如果使用了此屬性,標題和自定義圖標都會被覆蓋為系統定義的值)
- 默認值:'bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated'
-
title:在圖標下面顯示的標題文字(如果定義了 systemIcon屬性 ,這個屬性會被忽略)
</ul>
TabBarIOS 初體驗
先簡單來看下怎么使用TabBarIOS
import {
TabBarIOS
} from 'react-native';
render() {
return (
<View style={styles.container}>
<TabBarIOS
style={{height:49, width: width}}
>
</TabBarIOS>
</View>
);
}
效果:
render() {
return (
<View style={styles.container}>
<TabBarIOS
style={{height:49, width: width}}
>
<TabBarIOS.Item
systemIcon="bookmarks" // 系統圖標(bookmarks)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="contacts" // 系統圖標(contacts)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="downloads" // 系統圖標(downloads)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="favorites" // 系統圖標(favorites)
>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="history" // 系統圖標(history)
>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
效果:
- 首先我們需要引入TabBarIOS
- 使用 TabBarIOS 很簡單,但是需要配合 TabBarIOS.Item 使用,(需要注意的是我們必須給 TabBarIOS 設置尺寸,不然可能會造成實例化卻無法看到的問題)
- 接著我們來給它添加 Item (TabBarIOS最多只能包含5個 Item ,超出的部分會用 more圖標 代替)
- 是不是很簡單,接下來我們試著修改一下 TabBarIOS 的屬性,看看效果怎樣樣
<TabBarIOS style={{height:49, width: width}} tintColor="green" // 被選中標簽顏色 > </TabBarIOS>
效果:
<TabBarIOS style={{height:49, width: width}} tintColor="green" barTintColor="black" // TabBarIOS背景色 > </TabBarIOS>
效果:
<TabBarIOS style={{height:49, width: width}} tintColor="green" barTintColor="black" translucent={false} // TabBarIOS不需要半透明效果 > </TabBarIOS>
效果:
- 當前被選中標簽顏色
- 是否有半透明效果
這邊再來試試 TabBarIOS.Item 的屬性
<TabBarIOS style={{height:49, width: width}} tintColor="green" barTintColor="black" translucent={false} > <TabBarIOS.Item systemIcon="bookmarks" // 系統圖標(bookmarks) badge="99999999" > </TabBarIOS.Item> <TabBarIOS.Item systemIcon="contacts" // 系統圖標(contacts) badge="15" > </TabBarIOS.Item> <TabBarIOS.Item systemIcon="downloads" // 系統圖標(downloads) badge="@$!@" > </TabBarIOS.Item> <TabBarIOS.Item systemIcon="favorites" // 系統圖標(favorites) badge="aBBc" > </TabBarIOS.Item> <TabBarIOS.Item systemIcon="history" // 系統圖標(history) badge="99+" > </TabBarIOS.Item> </TabBarIOS>
效果:
<TabBarIOS.Item renderAsOriginal={true} // 如果為false,只會顯示純色圖片 icon={require('image!home')} > </TabBarIOS.Item>
效果:
selectedIcon={require('image!baker')}
效果:
title="首頁"
效果:
系統自帶圖標
<TabBarIOS.Item systemIcon="bookmarks" // 系統圖標(bookmarks) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="contacts" // 系統圖標(contacts) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="downloads" // 系統圖標(downloads) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="favorites" // 系統圖標(favorites) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="featured" // 系統圖標(featured) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="history" // 系統圖標(history) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="more" // 系統圖標(more) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="most-recent" // 系統圖標(most-recent) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="most-viewed" // 系統圖標(most-viewed) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="recents" // 系統圖標(recents) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="search" // 系統圖標(search) > </TabBarIOS.Item>
效果:
<TabBarIOS.Item systemIcon="top-rated" // 系統圖標(top-rated) > </TabBarIOS.Item>
效果:
- most-recent
- most-viewed
-
角標(角標的位置會受到TabBarIOS右邊空間音效,當位置不夠時,會自動往左移動,以保證顯示完整性)
- 自定義圖標(目前只支持本地圖片)
- 自定義高亮圖標(目前只支持本地圖片,如果沒有設置,則會顯示選中顏色圖標)
- 文字(如果設置了系統圖標,那么這個屬性會被忽略)
TabBarIOS.Item點擊
- 到這里肯定有人會說,為什么我的 TabBarIOS.Item 不能接收點擊事件,無法切換界面,這邊就來講解怎么去實現頁面的切換,它涉及到 TabBarIOS.Item 的兩個屬性 —— selected 和 onPress
render() { return ( <View style={styles.container}> <TabBarIOS style={{height:49, width: width}} tintColor="green" barTintColor="black" translucent={false} > <TabBarIOS.Item systemIcon="bookmarks" // 系統圖標(bookmarks) > <View style={[styles.childViewStyle, {backgroundColor:'yellow'}]}>
</View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="contacts" // 系統圖標(contacts) > <View style={[styles.childViewStyle, {backgroundColor:'blue'}]}> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="downloads" // 系統圖標(downloads) > <View style={[styles.childViewStyle, {backgroundColor:'red'}]}> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="favorites" // 系統圖標(favorites) > <View style={[styles.childViewStyle, {backgroundColor:'green'}]}> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="history" // 系統圖標(history) > <View style={[styles.childViewStyle, {backgroundColor:'gray'}]}> </View> </TabBarIOS.Item> </TabBarIOS> </View> );
}</code></pre>
- 首先,要實現頁面之間的切換,那么首先它們自己要有對應的頁面,這邊先來給各個 Item 設置屬于自己的頁面
- 頁面之間的切換其實就是根據 selected 是否為 ture,以此決定是否重新渲染界面,涉及到重新渲染,所以肯定需要使用到 getInitialState(狀態機) ,具體操作如下
getInitialState(){ return{ selectedTabItem:0 // 預設變量,記錄當前點擊的item } },
- 首先我們定義一個初始化變量來確定要顯示的頁面
當我們點擊相應標簽的時候,系統就會調用 onPress
屬性來進行反饋
onPress={() => {this.setState({selectedTabItem:0})}}
selected={this.state.selectedTabItem == 0}
var TabBarIOSDemo = React.createClass({
getInitialState(){ return{ selectedTabItem:0 } }, render() { return ( <View style={styles.container}> <TabBarIOS style={{height:49, width: width}} tintColor="green" barTintColor="black" translucent={false} > <TabBarIOS.Item systemIcon="bookmarks" // 系統圖標(bookmarks) onPress={() => {this.setState({selectedTabItem:0})}} selected={this.state.selectedTabItem == 0} > <View style={[styles.childViewStyle, {backgroundColor:'yellow'}]}> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="contacts" // 系統圖標(contacts) onPress={() => {this.setState({selectedTabItem:1})}} selected={this.state.selectedTabItem == 1} > <View style={[styles.childViewStyle, {backgroundColor:'blue'}]}> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="downloads" // 系統圖標(downloads) onPress={() => {this.setState({selectedTabItem:2})}} selected={this.state.selectedTabItem == 2} > <View style={[styles.childViewStyle, {backgroundColor:'red'}]}> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="favorites" // 系統圖標(favorites) onPress={() => {this.setState({selectedTabItem:3})}} selected={this.state.selectedTabItem == 3} > <View style={[styles.childViewStyle, {backgroundColor:'green'}]}> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="history" // 系統圖標(history) onPress={() => {this.setState({selectedTabItem:4})}} selected={this.state.selectedTabItem == 4} > <View style={[styles.childViewStyle, {backgroundColor:'gray'}]}> </View> </TabBarIOS.Item> </TabBarIOS> </View> ); } });</code></pre>
效果:
- 首先點擊onPress的時候我們需要更新 狀態機 中預設變量的值
- 接著我們要根據 預設變量 來判斷跳轉到哪個頁面(當預設變量的值改變后,狀態機會再次調用 render 函數進行渲染,也就會調用 TabBarIOS.Item 內的 selected 屬性)
- 視圖部分完整代碼
- 到這里,TabBarIOS頁面切換就完成了,當然實際開發中我們會抽取代碼,使代碼看起來不會這么雜亂,這在后面會通過綜合項目進行講解
補充
-
上面出現這樣的代碼,可能很多初學者不知道什么意思,這邊就補充說明一下,在JS中是允許多個樣式通過數組的形式傳遞的,它會根據數組內容自動去解析需要的值,并根據優先級去選擇優先選擇使用哪個屬性
來自:http://www.cnblogs.com/miaomiaoshen/p/6085266.html