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}    @H_502_395@// 如果为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> ); } };

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