在目前市面上的APP中，大部分都是選項(xiàng)與選項(xiàng)之間的切換，比如：微信、微博、QQ空間......, 在iOS中，我們可以通過(guò)TabItem類(lèi)進(jìn)行實(shí)現(xiàn)。那么，在React Native中，我們應(yīng)該怎么實(shí)現(xiàn)呢？
在React Native中可以通過(guò)TabBarIOS和TabBarIOS.Item組件來(lái)實(shí)現(xiàn)選項(xiàng)卡切換效果，大家可以看到后面帶有IOS，所以這個(gè)組件是不支持Android的，當(dāng)然后面我們可以自定義該組件。
一、TabBarIOS常見(jiàn)的屬性
View的所有屬性都可以被繼承
barTintColor color 設(shè)置tab條的背景顏色
tintColor color 設(shè)置tab條上被選中圖標(biāo)的顏色
translucent bool 設(shè)置Tab欄是不是半透明的效果
二、TabBarIOS.Item常見(jiàn)的屬性
badge number
在圖標(biāo)的右上方顯示小紅色氣泡，顯示信息
icon Image.propTypes.source
Tab按鈕自定義的圖標(biāo)，如果systemicon屬性被定義了，那么該屬性會(huì)被忽略
onPress function
當(dāng)Tab按鈕被選中的時(shí)候進(jìn)行回調(diào)，你可以設(shè)置selected={true}來(lái)設(shè)置組件被選中
selected bool
該屬性標(biāo)志子頁(yè)面是否可見(jiàn)，如果是一個(gè)空白的內(nèi)容頁(yè)面，那么一定是忘記了選中任何的一個(gè)頁(yè)面標(biāo)簽Tab
selectedIcon Image.propTypes.source
設(shè)置當(dāng)Tab按鈕被選中的時(shí)候顯示的自定義圖標(biāo)，如果systemIcon屬性被設(shè)置了，那么該屬性會(huì)被忽略。如果定義了icon屬性，但是當(dāng)前的selectedIcon屬性沒(méi)有設(shè)置，那么該圖標(biāo)會(huì)被設(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)都會(huì)被這些系統(tǒng)圖標(biāo)所覆蓋。
title string
在Tab按鈕圖標(biāo)下面顯示的標(biāo)題信息，如果你設(shè)置了SystemIcon屬性，那么該屬性會(huì)被忽略
三、TabBarIOS.Item案例展示
代碼截圖如下:
案例效果展示:
<p></p>
<p></p>
<p></p>
<p></p>
近期正在把公眾賬號(hào)的文章轉(zhuǎn)移到簡(jiǎn)書(shū)，如果要了解第一動(dòng)態(tài)，請(qǐng)關(guān)注我的微信公眾賬號(hào)，帶你從零到一的進(jìn)行React Native開(kāi)發(fā)實(shí)戰(zhàn)，在其他文章中會(huì)有對(duì)應(yīng)的code和資料發(fā)放！
