React Native從入門到深入 --TabBarIOS詳解

前言

現在在移動開發中,最常見的框架結構就是主框架選項與選項之間的切換,比如微信,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 ? ?bool

這個屬性決定了子視圖是否可見。如果你看到一個空白的頁面,很可能是沒有選中任何一個標簽。

onPress ?function

當此標簽被選中時調用。你應該修改組件的狀態來使得selected={true}。

selectedIcon ? ? ?Image.propTypes.source

當標簽被選中的時候顯示的自定義圖標。如果定義了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。在這里謝謝啦!!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容