React Native 之TabBarIOS

RodgerHarki 8年前發布 | 7K 次閱讀 ReactNative 移動開發 React Native

前言

學習本系列內容需要具備一定 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'
</li>
title：在圖標下面顯示的標題文字（如果定義了 systemIcon屬性 ,這個屬性會被忽略）

TabBarIOS 初體驗

先簡單來看下怎么使用TabBarIOS

import {
        TabBarIOS
    } from 'react-native';

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

效果：

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
使用 TabBarIOS 很簡單，但是需要配合 TabBarIOS.Item 使用,(需要注意的是我們必須給 TabBarIOS 設置尺寸，不然可能會造成實例化卻無法看到的問題)
接著我們來給它添加 Item （TabBarIOS最多只能包含5個 Item ，超出的部分會用 more圖標代替）

是不是很簡單，接下來我們試著修改一下 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>

效果：

當前被選中標簽顏色
是否有半透明效果

</li> </ul>

這邊再來試試 TabBarIOS.Item 的屬性

<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')}

效果：

title="首頁"

效果：

系統自帶圖標

<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="featured"  // 系統圖標(featured)
    >
    </TabBarIOS.Item>

效果：

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

效果：

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

效果：

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

效果：

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

效果：

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

效果：

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

效果：

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

效果：

most-recent
most-viewed
角標（角標的位置會受到TabBarIOS右邊空間音效，當位置不夠時，會自動往左移動，以保證顯示完整性）
自定義圖標（目前只支持本地圖片）
自定義高亮圖標（目前只支持本地圖片，如果沒有設置，則會顯示選中顏色圖標）
文字（如果設置了系統圖標，那么這個屬性會被忽略）

TabBarIOS.Item點擊

到這里肯定有人會說，為什么我的 TabBarIOS.Item 不能接收點擊事件，無法切換界面，這邊就來講解怎么去實現頁面的切換，它涉及到 TabBarIOS.Item 的兩個屬性 —— selected 和 onPress

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>
);

}</code></pre> 
    
 
     首先，要實現頁面之間的切換，那么首先它們自己要有對應的頁面，這邊先來給各個 Item 設置屬于自己的頁面 
     頁面之間的切換其實就是根據 selected 是否為 ture，以此決定是否重新渲染界面，涉及到重新渲染，所以肯定需要使用到 getInitialState（狀態機） ，具體操作如下 getInitialState(){
        return{
            selectedTabItem:0   // 預設變量，記錄當前點擊的item
        }
    }, 
       
       首先我們定義一個初始化變量來確定要顯示的頁面 
       </li> 
    </ul> </li> 
  </ul> 
  當我們點擊相應標簽的時候，系統就會調用 onPress 
  屬性來進行反饋 
  onPress={() => {this.setState({selectedTabItem:0})}} 
  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>
        );
    }
});</code></pre> 

效果： 
   
   
   首先點擊onPress的時候我們需要更新 狀態機 中預設變量的值 
   接著我們要根據 預設變量 來判斷跳轉到哪個頁面（當預設變量的值改變后，狀態機會再次調用 render 函數進行渲染，也就會調用 TabBarIOS.Item 內的 selected 屬性） 
   視圖部分完整代碼 
   到這里，TabBarIOS頁面切換就完成了，當然實際開發中我們會抽取代碼，使代碼看起來不會這么雜亂，這在后面會通過綜合項目進行講解 
   
  補充 
   
    上面出現這樣的代碼，可能很多初學者不知道什么意思，這邊就補充說明一下，在JS中是允許多個樣式通過數組的形式傳遞的，它會根據數組內容自動去解析需要的值，并根據優先級去選擇優先選擇使用哪個屬性
 
  
   
    
  來自：http://www.cnblogs.com/miaomiaoshen/p/6085266.html


                    
                         本文由用戶 RodgerHarki 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1479716479754.html
                         ReactNative 移動開發 React Native

React Native 之TabBarIOS

前言

TabBarIOS 組件簡介

TabBarIOS 常見屬性

TabBarIOS.Item 常見屬性

TabBarIOS 初體驗

TabBarIOS.Item點擊

補充

相關經驗

相關資訊

相關文檔

目錄