# 可任意渲染 item 的 dom 结构

- order: 1
- title_en: Custom rendering

可任意渲染 item 的 dom 结构

---
```js
<NukePlayGround>
  const iconsMap = {
    tab1: {
    icon: '\ue702',
    name: '首页'
    },
    tab2: {
    icon: '\ue728',
    name: '设置'
    }
  }

  <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>
</NukePlayGround>
```
---

```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: {
    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 />);
```