React-Native 之 TabBarIOS和TabBarIOS.Item使用

前言

  • 学习本系列内容需要具备一定 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 的两个属性 —— selectedonPress

    • 首先,要实现页面之间的切换,那么首先它们自己要有对应的页面,这边先来给各个 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中是允许多个样式通过数组的形式传递的,它会根据数组内容自动去解析需要的值,并根据优先级去选择优先选择使用哪个属性

    补充
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容