前言
現在在移動開發中,最常見的框架結構就是主框架選項與選項之間的切換,比如微信,QQ等。在iOS中我們可以通過UITabbar來實現。在React Native中,通過TabBarIOS 和TabBarIOSItem來實現器功能。
注意:在react Native中所以的組件只有帶有iOS或者Android后綴的組件,不能夠跨平臺運行。 需要自己搜索第三方框架來實現。
一、TabBarIOS常見的屬性
View的所有屬性都可以被繼承
barTintColorcolor? 設置tab條的背景顏色
tintColorcolor? 設置tab條上被選中圖標的顏色
translucentbool? 設置Tab欄是不是半透明的效果
二、TabBarIOS.Item常見的屬性
badge ? ?number
在圖標的右上方顯示小紅色氣泡,顯示信息
icon ? ?Image.propTypes.source
Tab按鈕自定義的圖標,如果systemicon屬性被定義了,那么該屬性會被忽略
這個屬性決定了子視圖是否可見。如果你看到一個空白的頁面,很可能是沒有選中任何一個標簽。
當此標簽被選中時調用。你應該修改組件的狀態來使得selected={true}。
當標簽被選中的時候顯示的自定義圖標。如果定義了systemIcon屬性,這個屬性會被忽略。如果定義了icon而沒定義這個屬性,在選中的時候圖標會染上藍色。
style設置樣式風格,繼承View的樣式各種風格
systemIcon
enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated')
系統預定義的圖標,如果你使用這些圖標,那么你上面設置的標題,選中的圖標都會被這些系統圖標所覆蓋。
titlestring
在Tab按鈕圖標下面顯示的標題信息,如果你設置了SystemIcon屬性,那么該屬性會被忽略
一、TabBarIOS的簡單使用
TabBarIOS 為主要組件,每一個Item放在TabBarItem中。沒有Item中需要放置組件來完成頁面信息。TabBarItem有onPress,通過狀態機判斷是否選擇,通過選中來判斷是夠點擊。
代碼截圖:
運行結果:
完整demo請https://github.com/nanaLxs/react-TabBarIOSDemo下載。如果感覺可以請star。在這里謝謝啦!!