前言
-
學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開(kāi)發(fā)基礎(chǔ)，沒(méi)有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(mén)(一) 學(xué)習(xí)
-
本人接觸 React Native 時(shí)間并不是特別長(zhǎng)，所以對(duì)其中的內(nèi)容和性質(zhì)了解可能會(huì)有所偏差，在學(xué)習(xí)中如果有錯(cuò)會(huì)及時(shí)修改內(nèi)容，也歡迎萬(wàn)能的朋友們批評(píng)指出，謝謝
-
文章第一版出自簡(jiǎn)書(shū)，如果出現(xiàn)圖片或頁(yè)面顯示問(wèn)題，煩請(qǐng)轉(zhuǎn)至 簡(jiǎn)書(shū) 查看 也希望喜歡的朋友可以點(diǎn)贊，謝謝
TabBarIOS 組件簡(jiǎn)介
- 目前的APP內(nèi)，大部分都是選項(xiàng)與選項(xiàng)之間切換，比如：微信、微博、QQ空間…，在iOS中，我們可以通過(guò)TabItem類(lèi)進(jìn)行實(shí)現(xiàn)，那么，在React Native中，我們可以通過(guò)TabBarIOS和TabBarIOS.Item組件來(lái)實(shí)現(xiàn)選項(xiàng)卡切換效果，大家可以看到后面帶有IOS，所以這個(gè)組件不支持Android，當(dāng)然后面我們會(huì)通過(guò)自定義該組件來(lái)滿足實(shí)際開(kāi)發(fā)需求
- 當(dāng)然，本章涉及到了 TabBarIOS組件 ，那么必不可少的，肯定需要與 TabBarIOS.Item 來(lái)搭配使用，廢話不多說(shuō)，先來(lái)看它們各自都擁有哪些屬性
TabBarIOS 常見(jiàn)屬性
-
繼承了View的所有屬性
-
barTintColor：標(biāo)簽欄的背景顏色
-
tintColor：當(dāng)前被選中的標(biāo)簽圖標(biāo)顏色
-
translucent：bool值，決定標(biāo)簽欄是否需要半透明化
TabBarIOS.Item 常見(jiàn)屬性
-
繼承了View的所有屬性
-
badge：圖標(biāo)右上角顯示的紅色角標(biāo)
-
icon：給當(dāng)前標(biāo)簽指定一個(gè)自定義圖標(biāo)(如果定義了 systemIcon屬性 這個(gè)屬性會(huì)被忽略)
-
onPress：點(diǎn)此標(biāo)簽被選中時(shí)調(diào)用，你應(yīng)該修改過(guò)組件的狀態(tài)使 selected={true}
-
selected：這個(gè)屬性決定了子視圖是否可見(jiàn)，如果你看到一個(gè)空白的頁(yè)面，很可能是沒(méi)有選中任何一個(gè)標(biāo)簽
-
selectedIcon：當(dāng)標(biāo)簽被選中的時(shí)候顯示的自定義圖標(biāo)（如果定義了systemIcon屬性，這個(gè)屬性會(huì)被忽略，如果定義了icon而沒(méi)定義這個(gè)屬性，在選中的時(shí)候圖標(biāo)會(huì)被染上藍(lán)色）
-
systemIcom：一些預(yù)定義的系統(tǒng)圖標(biāo)（如果使用了此屬性，標(biāo)題和自定義圖標(biāo)都會(huì)被覆蓋為系統(tǒng)定義的值）
- 默認(rèn)值：'bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated'
-
title：在圖標(biāo)下面顯示的標(biāo)題文字（如果定義了 systemIcon屬性,這個(gè)屬性會(huì)被忽略）
TabBarIOS 初體驗(yàn)
-
先簡(jiǎn)單來(lái)看下怎么使用TabBarIOS
