前言

  • 學習本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習

  • 本人接觸 React Native 時間并不是特別長，所以對其中的內(nèi)容和性質了解可能會有所偏差，在學習中如果有錯會及時修改內(nèi)容，也歡迎萬能的朋友們批評指出，謝謝

  • 文章第一版出自簡書，如果出現(xiàn)圖片或頁面顯示問題，煩請轉至 簡書 查看 也希望喜歡的朋友可以點贊，謝謝

TabBarIOS 組件簡介

  • 目前的APP內(nèi)，大部分都是選項與選項之間切換，比如：微信、微博、QQ空間…，在iOS中，我們可以通過TabItem類進行實現(xiàn)，那么，在React Native中，我們可以通過TabBarIOS和TabBarIOS.Item組件來實現(xiàn)選項卡切換效果，大家可以看到后面帶有IOS，所以這個組件不支持Android，當然后面我們會通過自定義該組件來滿足實際開發(fā)需求
  • 當然，本章涉及到了 TabBarIOS組件 ，那么必不可少的，肯定需要與 TabBarIOS.Item 來搭配使用，廢話不多說，先來看它們各自都擁有哪些屬性

TabBarIOS 常見屬性

  • 繼承了View的所有屬性

  • barTintColor：標簽欄的背景顏色

  • tintColor：當前被選中的標簽圖標顏色

  • translucent：bool值，決定標簽欄是否需要半透明化

TabBarIOS.Item 常見屬性

  • 繼承了View的所有屬性

  • badge：圖標右上角顯示的紅色角標

  • icon：給當前標簽指定一個自定義圖標(如果定義了 systemIcon屬性 這個屬性會被忽略)

  • onPress：點此標簽被選中時調(diào)用，你應該修改過組件的狀態(tài)使 selected={true}

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

  • selectedIcon：當標簽被選中的時候顯示的自定義圖標（如果定義了systemIcon屬性，這個屬性會被忽略，如果定義了icon而沒定義這個屬性，在選中的時候圖標會被染上藍色）

  • systemIcom：一些預定義的系統(tǒng)圖標（如果使用了此屬性，標題和自定義圖標都會被覆蓋為系統(tǒng)定義的值）
    • 默認值：'bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated'

  • title：在圖標下面顯示的標題文字（如果定義了 systemIcon屬性,這個屬性會被忽略）

TabBarIOS 初體驗