前言
眼看很多公司都開始嘗試使用ReactNative,達到跨平臺開發(fā)，最近也寫了很多文章抚官，希望讓更多想了解的同學快速上手ReactNative.
如果喜歡我的文章宰译，可以關注我微博:袁崢Seemygo
ReactNative之TabBariOS
- 目前主流的App,底部都有一個選項條能扒，這個就需要用TabBariOS實現(xiàn)
- 一行代碼躺苦，就會底部有條
<TabBarIOS></TabBarIOS>
- 常用屬性
barTintColor string：標簽欄的背景顏色印蔬。
style：樣式
tintColor string： 當前被選中的標簽圖標的顏色誊酌。
unselectedItemTintColor string： 當前沒有被選中的標簽圖標的顏色振诬。僅在iOS 10及以上版本有效
translucent bool： 一個布爾值戚嗅，決定標簽欄是否需要半透明化雨涛。
如何添加選項卡
- TabBarIOS.Item
- 注意：TabBarIOS.Item必須包裝一個View,作為點擊tabBar按鈕，切換的View
<TabBarIOS.Item title='消息'
icon={{uri:'tab_recent_nor'}}
badge={10}
>
<View>
<Text>消息</Text>
</View>
</TabBarIOS.Item>
- 常用屬性
badge string, number :在圖標右上角顯示一個紅色的氣泡懦胞。
icon Image.propTypes.source :給當前標簽指定一個自定義的圖標替久。如果定義了systemIcon屬性， 這個屬性會被忽略躏尉。
onPress function :當此標簽被選中時調用蚯根。你應該修改組件的狀態(tài)來使得selected={true}。
selected bool :這個屬性決定了子視圖是否可見胀糜。如果你看到一個空白的頁面颅拦，很可能是沒有選中任何一個標簽蒂誉。
selectedIcon Image.propTypes.source :當標簽被選中的時候顯示的自定義圖標。如果定義了systemIcon屬性距帅，這個屬性會被忽略右锨。如果定義了icon而沒定義這個屬性，在選中的時候圖標會染上藍色碌秸。
systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') :一些預定義的系統(tǒng)圖標绍移。注意如果你使用了此屬性，標題和自定義圖標都會被覆蓋為系統(tǒng)定義的值讥电。
title string :在圖標下面顯示的標題文字蹂窖。如果定義了systemIcon屬性，這個屬性會被忽略
選中按鈕允趟，切換界面
-
只要設置對應的tabBarItem的selected為true,就會自動跳轉到對應界面
- 注意：tabBarItem的selected屬性不能寫死恼策，可以搞個角標記錄當前選中那個角標
監(jiān)聽tabBarItem的點擊，修改selected屬性
使用
1.訂閱角標屬性
constructor(props){
super(props);
this.state = {
selectIndex:0
}
}
- 2.監(jiān)聽tabBar點擊潮剪，修改選中角標
onPress={()=>{
this.setState({
selectIndex:0
})
}}
- 3.select屬性根據(jù)角標判斷
selected={0==this.state.selectIndex}
應用整體代碼
render() {
return (
<TabBarIOS>
<TabBarIOS.Item title='消息'
icon={{uri:'tab_recent_nor'}}
badge={10}
onPress={()=>{
this.setState({
selectIndex:0
})
}}
selected={0==this.state.selectIndex}
>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<Text>消息</Text>
</View>
</TabBarIOS.Item>
</TabBarIOS>
)
}
