# Tabbar Item 自定义渲染

- order: 1

可任意渲染 item 的 dom 结构

-----------

````js

import {createElement, Component,render} from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import Tabbar from 'nuke-tabbar';
import Iconfont from 'nuke-iconfont';

const iconsMap = {
  tab1:{
    icon:'\ue702',
    name:'首页'
  },
  tab2:{
    icon:'\ue728',
    name:'设置'
  }
}
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state =  {
      activeKey: {key: 'tab1'}
    };
  }
  componentDidMount(){
    Iconfont({name:"tabicons",url:"https://at.alicdn.com/t/font_463880_2ir6cgkiscpfzuxr.ttf"});
  }
  renderContent = (pageText) => {
    return (
      <View style={[styles.tabContent]}>
        <Text style={styles.tabText}>Tabbar 经典实用场景 {pageText}</Text>
      </View>
    );
  }
  renderItemWithIcon = (iconName,isActive, key) =>{
    return (
      <View style={styles.item}>
        <View style={[styles.itemIcon, isActive ? styles.itemIconActiveBg : {}]}>
          <Text style={[styles.icon,isActive ? styles.activeText:{}]}>{iconsMap[iconName]['icon']}</Text>
        </View>
        <Text style={[styles.itemText,isActive ? styles.activeText:{}]}>{iconsMap[iconName]['name']}</Text>
    </View>
    );
  }
  render() {
    return (
      <Tabbar iconBar={true} activeKey={this.state.activeKey}>
        <Tabbar.Item
          tabKey="tab1"
          render={this.renderItemWithIcon.bind(this,'tab1')}>
          {this.renderContent('tab1')}
        </Tabbar.Item>
        <Tabbar.Item
          tabKey="tab2"
          render={this.renderItemWithIcon.bind(this,'tab2')}>
          {this.renderContent('tab2')}
        </Tabbar.Item>
      </Tabbar>
    );
  }
}
const styles = {
  tabContent:{
    flex:1,
    backgroundColor:'#ffffff',
    alignItems: 'center',
    justifyContent:'center'
  },
  tabText: {
    fontSize:40
  },
  item:{
    height:70,
    alignItems: 'center',
    justifyContent:'center'
  },
  icon:{
    fontFamily: 'tabicons',
    fontSize:52,
    color:'#999999'
  },

  itemIcon:{
    width:48,
    height:48,
    borderRadius:24,
    marginBottom:6,
    marginTop:14,
    alignItems: 'center',
    justifyContent:'center'
  },
  itemText:{
    fontSize:24
  },
  activeText:{
    color:'#3089dc'
  }
}
render(<App/>);
````