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(
      <View style={styles.tabsStyle}>
          {this.props.tabs.map((tab,i)=>this.renderItem(tab,i))}
      </View>

  );
}
renderItem(tab,i){
  const color =this.props.activeTab == i?"#B22222":"black";
  var name = color == "#B22222"?this.props.tabIconNamesClick[i]:this.props.tabIconNames[i];
  return(
    <TouchableOpacity style={styles.tabItem}
      onPress={()=>this.props.goToPage(i)}
       key={i}>
        <View style={styles.tabItemView}>
            {/* <Icon
                  name={this.props.tabIconNames[i]}
                   size={30}
                   color={color}
              >

            </Icon> */}

            <Image source={{uri:name}}
              style={[{width:20,height:20},{margin:5}]}
              >

              </Image>
            <Text style={{color:color}}>
                {this.props.tabNames[i]}
            </Text>
        </View>
    </TouchableOpacity>
  )
}

}

const styles=StyleSheet.create({
tabsStyle:{

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

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

}

});