yylib-quick-mobile/dist/yylib/tabBar/YYTabBarDev.js

yylib-quick-mobile

/**
 * Created By whh 2017/12/26
 * */
import React, {Component} from 'react';
import {TabBar} from 'antd-mobile';
import YYIcon from './../icon/YYIcon';

class YYTabBarDev extends React.Component {
	constructor(){
		super();
		this.state={
			selectTabBar:null
		}
	}
	/****切换tabbar事件*****/
	onChange(options){
		if(options&&options.nid){
			this.setState({selectTabBar:options.nid});
			if(this.props.onChange&&typeof this.props.onChange=="function"){
				this.props.onChange(options);
			}
		}
	}
	getChildern(){
		let  {children}=this.props;
    children = (children&&children.constructor==Array)?children:[children];
    if(children&&children.length){
      Array.prototype.slice.call(children)
		return children.map((child,index)=>{
			let  {uititle,badge,icon,iconColor,selectedIconColor,dot,selected,nid}=child.props;
			//selectedIcon={(<YYIcon type={selectedIcon}  color={selectedIconColor} />)}
      return (
				<TabBar.Item
				title={uititle}
				badge={badge}
				icon={(<YYIcon type={icon} color={iconColor} />)}
				selectedIcon={(<YYIcon type={icon} color={selectedIconColor} />)}
				dot={dot}
				selected={!this.state.selectTabBar?(index==0):(this.state.selectTabBar==nid)}
				onPress={this.onChange.bind(this,child.props)}
				key={index}
				>
			    {child.props.children}
			   </TabBar.Item>
			)
		})
		}
		return []
	}
    render() {
        let {barTintColor,tintColor,unselectedTintColor,visible,...restProps} = this.props;
        return (
            <div style={{position: 'fixed', height: '100%', width: '100%', top: 0}}>
                <TabBar
                {...restProps}
                barTintColor={barTintColor}
                tintColor={tintColor}
                unselectedTintColor={unselectedTintColor}
                hidden={!visible}
                >
                {
                	this.getChildern()
                }
                </TabBar>
            </div>
        )
    };
}
;

YYTabBarDev.defaultProps = {
  visible: true
}

module.exports=YYTabBarDev;