(申明: 此系列教程,轉(zhuǎn)載旋之華微信公眾號,如有侵權(quán) . 通知刪除~)

(大家可以添加他的微信公眾號了解更多內(nèi)容.)

image.png

在目前市面上的APP中，大部分都是選項與選項之間的切換，比如：微信、微博、QQ空間......, 在iOS中，我們可以通過TabItem類進(jìn)行實現(xiàn)。那么，在React Native中，我們應(yīng)該怎么實現(xiàn)呢？

image

  在React Native中可以通過TabBarIOS和TabBarIOS.Item組件來實現(xiàn)選項卡切換效果，大家可以看到后面帶有IOS，所以這個組件是不支持Android的，當(dāng)然后面我們可以自定義該組件。

一、TabBarIOS常見的屬性

View

的所有屬性都可以被繼承

barTi n

tColor

color 設(shè)置tab條的背景顏色

tintColor

color 設(shè)置tab條上被選中圖標(biāo)的顏色

translucent

bool 設(shè)置Tab欄是不是半透明的效果

二、TabBarIOS.Item常見的屬性

badge

** number **

在圖標(biāo)的右上方顯示小紅色氣泡，顯示信息

icon

** Image.propTypes.source**

Tab按鈕自定義的圖標(biāo)，如果systemicon屬性被定義了，那么該屬性會被忽略

onPress

** function **

當(dāng)Tab按鈕被選中的時候進(jìn)行回調(diào)，你可以設(shè)置selected={true}來設(shè)置組件被選中

selected

** bool **

   該屬性標(biāo)志子頁面是否可見，如果是一個空白的內(nèi)容頁面，那么一定是忘記了選中任何的一個頁面標(biāo)簽Tab

selectedIcon

** Image.propTypes.source **

   設(shè)置當(dāng)Tab按鈕被選中的時候顯示的自定義圖標(biāo)，如果systemIcon屬性被設(shè)置了，那么該屬性會被忽略。如果定義了icon屬性，但是當(dāng)前的selectedIcon屬性沒有設(shè)置，那么該圖標(biāo)會被設(shè)置成藍(lán)色

style 設(shè)置樣式風(fēng)格，繼承View的樣式各種風(fēng)格

systemIcon

enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated')

    系統(tǒng)預(yù)定義的圖標(biāo)，如果你使用這些圖標(biāo)，那么你上面設(shè)置的標(biāo)題，選中的圖標(biāo)都會被這些系統(tǒng)圖標(biāo)所覆蓋。

**

title

string **

   在Tab按鈕圖標(biāo)下面顯示的標(biāo)題信息，如果你設(shè)置了SystemIcon屬性，那么該屬性會被忽略

三、TabBarIOS.Item案例展示

代碼截圖如下:

image

image

image

image

image

案例效果展示:

image