TabBarIOS与TabBarIOS.Item组件

一、TabBarIOS常见的属性

1. View的所有属性都可以被继承
2. barTintColor colr 设置tab条的背景颜色
3. tintColor color 设置tab条上被选中图标的颜色
4. translucent bool 设置Tab栏是不是半透明的效果

二、TabBarIOS.Item常见的属性

1. badge number在图标的右上方显示小红色气泡、显示信息
2. icon Image.propTypes.source
   Tab按钮自定义的图标、如果systemicon属性被定义了，那么该属性会被忽略
3. onPress function
   当Tab按钮被选中的时候进行回调，你可以设置selected=(true)来设置组件被选中
4. selected bool
   该属性标志子页面是否可见，如果是一个空白的内容页面，那么一定是忘记了选中任何的一个页面标签Tab
5. selectedIcon Image.propTypes.source
   设置当Tab按钮被选中的时候显示的自定义图标、如果systemIcon属性被设置了，那么该属性会被忽略。如果定义了icon属性，但是当前的selectedIcon属性没有设置，那么该图标会被设置成蓝色
6. style 设置样式风格，继承View的样式各种风格
7. systemIconenum(“bookmarks”,”contacts”,”downloads”,”favorites”,”featured”,”history”,”more”,”most-recent”,”most-viewed”,”recents”,”search”,”top-rated”)
   系统预定义的图标，如果你使用这些图标，那么你上面设置的标题，选中的图标都会被这些系统图标所覆盖。
8. title string
   在tab按钮图标下面显示的标题信息，如果你设置了SystemIcon属性，那么该属性会被忽略

三、效果案例展示

代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS
} from 'react-native';
// 导入系统类
var Dimensions = require('Dimensions');
var screenW = Dimensions.get('window').width;
var  TabBarDemo = React.createClass({
        // 设置初始值
    getInitialState(){
        return{
            // 默认选中的tabBarItem
            selectedItem:'home',
        }
    },
     render() {
        return (
              <View style={styles.container}>
                    <View style={styles.navBarStyle}><Text style={styles.navTitleStyle}>TabBar切换</Text></View>
                    <TabBarIOS
                        barTintColor='#e8e8e8'
                        tintColor="purple"
                        style={styles.tabBarStyle}
                    >
                        <TabBarIOS.Item
                            systemIcon="bookmarks"
                            badge="3"
                            selected={this.state.selectedItem == 'home'}
                            onPress={()=>{
                                this.setState({selectedItem:'home'})
                            }}
                        >
                            <View style={styles.commonViewStyle}>
                                <Text>bookmarks</Text>
                            </View>
                        </TabBarIOS.Item>
                        <TabBarIOS.Item
                            systemIcon="downloads"
                            selected={this.state.selectedItem == 'second'}
                            onPress={()=>{
                                this.setState({selectedItem:'second'})
                            }}
                        >
                            <View style={styles.commonViewStyle}>
                                <Text>downloads</Text>
                            </View>
                        </TabBarIOS.Item>
                        <TabBarIOS.Item
                            systemIcon="favorites"
                            selected={this.state.selectedItem == 'three'}
                            onPress={()=>{
                                this.setState({selectedItem:'three'})
                            }}
                        >
                            <View style={styles.commonViewStyle}>
                                <Text>favorites</Text>
                            </View>
                        </TabBarIOS.Item>
                        <TabBarIOS.Item
                            systemIcon="more"
                            selected={this.state.selectedItem == 'four'}
                            onPress={()=>{
                                this.setState({selectedItem:'four'})
                            }}
                        >
                            <View style={styles.commonViewStyle}>
                                <Text>more</Text>
                            </View>
                        </TabBarIOS.Item>
                    </TabBarIOS>
              </View>
        );
    }
    
})
const styles = StyleSheet.create({
    container: {
        flex:1,
    },
    // 导航栏样式
    navBarStyle:{
        height:64,
        backgroundColor:'purple',
        justifyContent:'center',
        alignItems:'center',
    },
    navTitleStyle:{
        color:'#fff',
        fontSize:20,
    },
    commonViewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
});