专栏首页向治洪React-Native组件之 TabBarIOS和TabBarIOS.Item

React-Native组件之 TabBarIOS和TabBarIOS.Item

TabBarIOS 组件简介

目前的APP内,大部分都是选项与选项之间切换,比如:微信、微博、QQ空间…,在iOS中,我们可以通过TabItem类进行实现,那么,在React Native中,我们可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果,大家可以看到后面带有IOS,所以这个组件不支持Android,当然后面我们会通过自定义该组件来满足实际开发需求。

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 实例

  1. 首先我们需要引入TabBarIOS
 import {
        TabBarIOS
  } from 'react-native';
  1. 使用 TabBarIOS 很简单,但是需要配合 TabBarIOS.Item 使用,(需要注意的是我们必须给TabBarIOS设置尺寸,不然可能会造成实例化却无法看到的问题)。
  render() {
      return (
            <View style={styles.container}>
              <TabBarIOS
                  style={{height:49, width: width}}
              >
              </TabBarIOS>
            </View>
      );
    }
  1. 接下来我们来给它添加 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>
      );
    }

4. 修改 TabBarIOS 的属性,修改选择后选项卡的颜色。

 <TabBarIOS
      style={{height:49, width: width}}
      tintColor="green"    // 被选中标签颜色
  >
  </TabBarIOS>
![这里写图片描述](http://img.blog.csdn.net/20170514203507107?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhbmd6aGlob25nOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

修改系统自带图标

  <TabBarIOS.Item
      systemIcon="bookmarks"  // 系统图标(bookmarks)
  >
  </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="首页"
  1. 完整代码
class TabBarIOSScene extends Component{

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

实际开发中,我们还需要对相似功能的代码进行抽取,以达到代码的精简。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一文了解Android游戏SDK开发

    去年从平安离职之后,加入了一家游戏公司,负责游戏SDK相关的业务开发和维护工作,经过半年来的摸索,对于游戏SDK的开发有了一定的理解,下面就对游戏SDK开发涉及...

    xiangzhihong
  • Kotlin基础之内联函数

    内联函数 使用高阶函数会给运行时带来一些坏处:每个函数都是一个对象,捕获闭包(如:访问函数体内的变量),内存分配(函数对象或Class),虚拟调用引入的运行过载...

    xiangzhihong
  • InvocationTargetException异常解析

    InvocationTargetException异常由Method.invoke(obj, args...)方法抛出。当被调用的方法的内部抛出了异常而没有被捕...

    xiangzhihong
  • Vue配置多模块

    修改wenpack.prod.conf.js(参考webpakc.dev.conf.js修改)

    苦咖啡
  • JNI基础

    JNI基础 将java中的字符串转换成C中字符串的工具方法 char* Jstring2CStr(JNIEnv* env, ...

    xiangzhihong
  • Spring如何加载log4j配置文件

    我是十三
  • web前端技术的优势有哪些

    前端发展到今天,不仅在形式、内容和功能上越来越丰富,对前端开发人员的要求也越来越高!不仅在技术广度上提出了新的要求,前端开发人员薪资高低,早已经与技术深度成正比...

    千锋哈尔滨IT培训
  • 企业AD架构规划设计详解

    这个章节主要讲Active Directory 域服务概述及相关概念,设计步骤及AD常见的规划设计TOP方案,每种架构TOP方案的特定及优缺点。

    用户7118337
  • Ambari在离线环境中安装Hadoop集群 顶

    如果手工安装Hadoop集群,在管理和后继部署中,越来越多的问题不断出现,主要如下:

    白石
  • MYSQL官方与主流开源版本基准压测对比

    历史相对久一点的公司都存在MYSQL版本相对较旧的困扰,但基于系统业务的稳定迟迟不敢升级。不升级基本不会有问题,一旦升级可能面临代码不兼容、重写等问题。但随着业...

    MySQL轻松学

扫码关注云+社区

领取腾讯云代金券