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屬性 ,這個屬性會被忽略)

  • </ul>

    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 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!