你好，歡迎來到IOS教程網
設為首頁加入收藏

首頁
IOS基礎知識
IOS使用技巧
IOS編程開發
IOS教程
IOS訊息
 Ios教程網 >> IOS使用技巧 >> IOS技巧綜合 >> React Native 之TabBarIOS

React Native 之TabBarIOS

編輯：IOS技巧綜合
[摘要]本文是對React Native 之TabBarIOS的講解，對學習IOS蘋果軟件開發有所幫助,與大家分享。

前言

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

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

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

TabBarIOS 組件簡介

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

TabBarIOS 常見屬性

    繼承了View的所有屬性

    barTintColor：標簽欄的背景顏色

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

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

TabBarIOS.Item 常見屬性

    繼承了View的所有屬性

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

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

    onPress：點此標簽被選中時調用，你應該修改過組件的狀態使 selected={true}

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

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

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

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

TabBarIOS 初體驗

    先簡單來看下怎麼使用TabBarIOS
    • 首先我們需要引入TabBarIOS


        import {
        TabBarIOS
    } from 'react-native';
      使用 TabBarIOS 很簡單，但是需要配合 TabBarIOS.Item 使用,(需要注意的是我們必須給TabBarIOS設置尺寸，不然可能會造成實例化卻無法看到的問題)


        render() {
        return (
            <View style={styles.container}>
                <TabBarIOS
                    style={{height:49, width: width}}
                >
                </TabBarIOS>
            </View>
        );
    }

    效果：
    TabBarIOS實例化效果

      接著我們來給它添加 Item（TabBarIOS最多只能包含5個Item，超出的部分會用 more圖標 代替）


        render() {
        return (
            <View style={styles.container}>
                <TabBarIOS
                    style={{height:49, width: width}}
                >
                    <TabBarIOS.Item
                        systemIcon="bookmarks"  // 系統圖標(bookmarks)
                    >
                    </TabBarIOS.Item>
                    <TabBarIOS.Item
                        systemIcon="contacts"  // 系統圖標(contacts)
                    >
                    </TabBarIOS.Item>
                    <TabBarIOS.Item
                        systemIcon="downloads"  // 系統圖標(downloads)
                    >
                    </TabBarIOS.Item>
                    <TabBarIOS.Item
                        systemIcon="favorites"  // 系統圖標(favorites)
                    >
                    </TabBarIOS.Item>
                    <TabBarIOS.Item
                        systemIcon="history"  // 系統圖標(history)
                    >
                    </TabBarIOS.Item>
                </TabBarIOS>
            </View>
        );
    }

    效果：
    TabBarIOS.Item效果

    是不是很簡單，接下來我們試著修改一下 TabBarIOS 的屬性，看看效果怎樣樣
    • 當前被選中標簽顏色


        <TabBarIOS
        style={{height:49, width: width}}
        tintColor="green"   // 被選中標簽顏色
    >
    </TabBarIOS>

    效果：
    被選中標簽顏色

      背景色


        <TabBarIOS
        style={{height:49, width: width}}
        tintColor="green"
        barTintColor="black"    // TabBarIOS背景色
    >
    </TabBarIOS>

    效果：
    背景色效果

      是否有半透明效果


        <TabBarIOS
        style={{height:49, width: width}}
        tintColor="green"
        barTintColor="black"
        translucent={false}     // TabBarIOS不需要半透明效果
    >
    </TabBarIOS>

    效果：
    沒有半透明效果

    這邊再來試試 TabBarIOS.Item 的屬性
    • 系統自帶圖標
      • bookmarks


          <TabBarIOS.Item
        systemIcon="bookmarks"  // 系統圖標(bookmarks)
    >
    </TabBarIOS.Item>

      效果：
      bookmarks

        contacts


          <TabBarIOS.Item
        systemIcon="contacts"  // 系統圖標(contacts)
    >
    </TabBarIOS.Item>

      效果：
      contacts

        downloads


          <TabBarIOS.Item
        systemIcon="downloads"  // 系統圖標(downloads)
    >
    </TabBarIOS.Item>

      效果：
      downloads

        favorites


          <TabBarIOS.Item
        systemIcon="favorites"  // 系統圖標(favorites)
    >
    </TabBarIOS.Item>

      效果：
      favorites

        featured


          <TabBarIOS.Item
        systemIcon="featured"  // 系統圖標(featured)
    >
    </TabBarIOS.Item>

      效果：
      featured

        history


          <TabBarIOS.Item
        systemIcon="history"  // 系統圖標(history)
    >
    </TabBarIOS.Item>

      效果：
      history

        more


          <TabBarIOS.Item
        systemIcon="more"  // 系統圖標(more)
    >
    </TabBarIOS.Item>

      效果：
      more

        most-recent


          <TabBarIOS.Item
        systemIcon="most-recent"  // 系統圖標(most-recent)
    >
    </TabBarIOS.Item>

      效果：
      most-recent

        most-viewed


          <TabBarIOS.Item
        systemIcon="most-viewed"  // 系統圖標(most-viewed)
    >
    </TabBarIOS.Item>

      效果：
      most-viewed

        recents


          <TabBarIOS.Item
        systemIcon="recents"  // 系統圖標(recents)
    >
    </TabBarIOS.Item>

      效果：
      recents

        search


          <TabBarIOS.Item
        systemIcon="search"  // 系統圖標(search)
    >
    </TabBarIOS.Item>

      效果：
      search

        top-rated


          <TabBarIOS.Item
        systemIcon="top-rated"  // 系統圖標(top-rated)
    >
    </TabBarIOS.Item>

      效果：
      top-rated

      • 角標（角標的位置會受到TabBarIOS右邊空間音效，當位置不夠時，會自動往左移動，以保證顯示完整性）


        <TabBarIOS
        style={{height:49, width: width}}
        tintColor="green"
        barTintColor="black"
        translucent={false}
    >
        <TabBarIOS.Item
            systemIcon="bookmarks"  // 系統圖標(bookmarks)
            badge="99999999"
        >
        </TabBarIOS.Item>
        <TabBarIOS.Item
            systemIcon="contacts"  // 系統圖標(contacts)
            badge="15"
        >
        </TabBarIOS.Item>
        <TabBarIOS.Item
            systemIcon="downloads"  // 系統圖標(downloads)
            badge="@$!@"
        >
        </TabBarIOS.Item>
        <TabBarIOS.Item
            systemIcon="favorites"  // 系統圖標(favorites)
            badge="aBBc"
        >
        </TabBarIOS.Item>
        <TabBarIOS.Item
            systemIcon="history"  // 系統圖標(history)
            badge="99+"
        >
        </TabBarIOS.Item>
    </TabBarIOS>
    效果：
    角標效果
      自定義圖標（目前只支持本地圖片）


        <TabBarIOS.Item
        renderAsOriginal={true} // 如果為false，只會顯示純色圖片
        icon={require('image!home')}
    >
    </TabBarIOS.Item>

    效果：
    自定義圖標

      自定義高亮圖標（目前只支持本地圖片，如果沒有設置，則會顯示選中顏色圖標）


        selectedIcon={require('image!baker')}

    效果：
    高亮圖片效果.gif

      文字（如果設置了系統圖標，那麼這個屬性會被忽略）


        title="首頁"

    效果：
    文字效果

TabBarIOS.Item點擊

    到這裡肯定有人會說，為什麼我的 TabBarIOS.Item 不能接收點擊事件，無法切換界面，這邊就來講解怎麼去實現頁面的切換，它涉及到 TabBarIOS.Item 的兩個屬性 —— selected 和 onPress
    • 首先，要實現頁面之間的切換，那麼首先它們自己要有對應的頁面，這邊先來給各個 Item 設置屬於自己的頁面


        render() {
      return (
        <View style={styles.container}>
            <TabBarIOS
                style={{height:49, width: width}}
                tintColor="green"
                barTintColor="black"
                translucent={false}
            >
                <TabBarIOS.Item
                    systemIcon="bookmarks"  // 系統圖標(bookmarks)
                >
                    <View style={[styles.childViewStyle, {backgroundColor:'yellow'}]}>

                    </View>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    systemIcon="contacts"  // 系統圖標(contacts)
                >
                    <View style={[styles.childViewStyle, {backgroundColor:'blue'}]}>

                    </View>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    systemIcon="downloads"  // 系統圖標(downloads）
                >
                    <View style={[styles.childViewStyle, {backgroundColor:'red'}]}>

                    </View>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    systemIcon="favorites"  // 系統圖標(favorites)
                >
                    <View style={[styles.childViewStyle, {backgroundColor:'green'}]}>

                    </View>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    systemIcon="history"  // 系統圖標(history)
                >
                    <View style={[styles.childViewStyle, {backgroundColor:'gray'}]}>

                    </View>
                </TabBarIOS.Item>
            </TabBarIOS>
        </View>
    );
}
      頁面之間的切換其實就是根據 selected 是否為 ture，以此決定是否重新渲染界面，涉及到重新渲染，所以肯定需要使用到 getInitialState（狀態機） ，具體操作如下
      • 首先我們定義一個初始化變量來確定要顯示的頁面


          getInitialState(){
        return{
            selectedTabItem:0   // 預設變量，記錄當前點擊的item
        }
    },
        當我們點擊相應標簽的時候，系統就會調用 onPress 屬性來進行反饋
        • 首先點擊onPress的時候我們需要更新 狀態機 中預設變量的值


            onPress={() => {this.setState({selectedTabItem:0})}}
          接著我們要根據 預設變量 來判斷跳轉到哪個頁面（當預設變量的值改變後，狀態機會再次調用 render 函數進行渲染，也就會調用 TabBarIOS.Item 內的 selected 屬性）


            selected={this.state.selectedTabItem == 0}
          視圖部分完整代碼


            var TabBarIOSDemo = React.createClass({

        getInitialState(){
            return{
                selectedTabItem:0
            }
        },

        render() {
            return (
                <View style={styles.container}>
                    <TabBarIOS
                        style={{height:49, width: width}}
                        tintColor="green"
                        barTintColor="black"
                        translucent={false}
                    >
                        <TabBarIOS.Item
                            systemIcon="bookmarks"  // 系統圖標(bookmarks)
                            onPress={() => {this.setState({selectedTabItem:0})}}
                            selected={this.state.selectedTabItem == 0}
                        >
                            <View style={[styles.childViewStyle, {backgroundColor:'yellow'}]}>

                            </View>
                        </TabBarIOS.Item>
                        <TabBarIOS.Item
                            systemIcon="contacts"  // 系統圖標(contacts)
                            onPress={() => {this.setState({selectedTabItem:1})}}
                            selected={this.state.selectedTabItem == 1}
                        >
                            <View style={[styles.childViewStyle, {backgroundColor:'blue'}]}>

                            </View>
                        </TabBarIOS.Item>
                        <TabBarIOS.Item
                            systemIcon="downloads"  // 系統圖標(downloads)
                            onPress={() => {this.setState({selectedTabItem:2})}}
                            selected={this.state.selectedTabItem == 2}
                        >
                            <View style={[styles.childViewStyle, {backgroundColor:'red'}]}>

                            </View>
                        </TabBarIOS.Item>
                        <TabBarIOS.Item
                            systemIcon="favorites"  // 系統圖標(favorites)
                            onPress={() => {this.setState({selectedTabItem:3})}}
                            selected={this.state.selectedTabItem == 3}
                        >
                            <View style={[styles.childViewStyle, {backgroundColor:'green'}]}>

                            </View>
                        </TabBarIOS.Item>
                        <TabBarIOS.Item
                            systemIcon="history"  // 系統圖標(history)
                            onPress={() => {this.setState({selectedTabItem:4})}}
                            selected={this.state.selectedTabItem == 4}
                        >
                            <View style={[styles.childViewStyle, {backgroundColor:'gray'}]}>

                            </View>
                        </TabBarIOS.Item>
                    </TabBarIOS>
                </View>
            );
        }
    });
        效果：
        TabBarIOS頁面切換效果.gif
    到這裡，TabBarIOS頁面切換就完成了，當然實際開發中我們會抽取代碼，使代碼看起來不會這麼雜亂，這在後面會通過綜合項目進行講解

補充

    上面出現這樣的代碼，可能很多初學者不知道什麼意思，這邊就補充說明一下，在JS中是允許多個樣式通過數組的形式傳遞的，它會根據數組內容自動去解析需要的值，並根據優先級去選擇優先選擇使用哪個屬性

    補充

  1. 上一頁:
  2. 下一頁:
IOS技巧綜合
ios9.3.2正式版怎麼升級 ios9.3.2正式版升級教程 　　ios9.3.2正式版怎麼升級？ios9.3.2正式版
iPhone6/6 Plus拍照技巧匯總  iPhone6/6 Plus拍照技巧匯總一、為
蘋果怎麼變安卓系統 ios怎麼使用安卓模擬器 最近一款蘋果手機神器軟件引起了大家的注意，專為蘋果打造的超
IOS使用技巧
相關文章
+
IOS7技巧IOS8技巧IOS9技巧IOS10技巧IOS技巧綜合IOS6技巧蘋果技巧知識錯誤代碼解答
iOS9正式版固件官方下載大全 附升級教程！
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved