react-native-vector-icons/Ionicons 自定义tabbar ---2

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
PixelRatio,
Image,
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';
export default class HKTabBar extends Component {
static propTypes = {
goToPage: React.PropTypes.func, //跳转到Tab的方法
activeTab: React.PropTypes.number,//选中的下标
tabs: React.PropTypes.array,//tabs的集合!像OC items的数组

     //接下来!我们扩展自定义的属性
     tabNames:React.PropTypes.array,//文字的名字
     tabIconNames:React.PropTypes.array,//Item图片的名称
     tabIconNamesClick:React.PropTypes.array,//这里是被点击的图片
 };
render(){
  return(
      
          {this.props.tabs.map((tab,i)=>this.renderItem(tab,i))}
      

  );
}
renderItem(tab,i){
  const color =this.props.activeTab == i?"#B22222":"black";
  var name = color == "#B22222"?this.props.tabIconNamesClick[i]:this.props.tabIconNames[i];
  return(
    this.props.goToPage(i)}
       key={i}>
        
            {/* 

             */}

            

              
            
                {this.props.tabNames[i]}
            
        
    
  )
}

}

const styles=StyleSheet.create({
tabsStyle:{

    height:50,
    flexDirection:'row',
    borderTopWidth:1,
    borderColor:'gray',

},
tabItem:{
  flex:1
},
tabItemView:{
  alignItems:'center',

}

});