# ep-tabbar

- order: 0

作为容器组件的基础使用方式,导航位于底部

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import EpTabbar from 'nuke-ep-tabbar';
const NAV_ITEM_WIDTH = 300;
const KEY_LIST = [
  { title: '我的', key: 'my', style: { width: NAV_ITEM_WIDTH } },
  { title: '购物车', key: 'cart', style: { width: NAV_ITEM_WIDTH } },
  { title: '淘宝心选', key: 'xinxuan', style: { width: NAV_ITEM_WIDTH } }
];

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      key: 0
    };
  }
  /**
   * 渲染tab主体的方法，入参为当前tab的key值。根据不同的key值选择渲染不同的route
   */
  renderPage = (itemData, currKey, prevKey) => {
    return (
      <View style={{ backgroundColor: 'red' }}>
        <Text>tab:{currKey}</Text>
      </View>
    );
  };
  /*
   * key:选中的值
   * type:切换类型  可以是滑动pan/点击导航click/code调用 code 等类型
   */
  onChange = (currKey, prevKey, type) => {
    console.log(
      `[Debug] ${type} to currKey of 【${currKey}】 & prevKey is 【${prevKey}】`
    );
  };
  /**
   *  渲染每个nav item的方法
   *  可以增加renderCustom方法，用于渲染固定位置
   */
  renderNavItem = (itemData, index, currIndex) => {
    let color = 'white';
    if (index === currIndex) {
      color = '#333';
    }
    return (
      <View style={[s.navItem, { width: itemData.style.width }]}>
        <Text style={{ color: color }}>{itemData.title}</Text>
      </View>
    );
  };
  /**
   * 渲染ep绑定时的tab切换加载
   */
  renderLoading() {
    return <Text>加载中...</Text>;
  }

  /**
   * 在滚动发生前的回调，可以用来阻止滚动发生
   */
  beforeSlide(index, type) {
    return true;
  }

  render() {
    return (
      <EpTabbar
        activeKey={this.state.key}
        dataSource={KEY_LIST}
        navStyle={s.navStyle}
        navFocusStyle={s.focusStyle}
        renderNavItem={this.renderNavItem}
        renderLoading={this.renderLoading}
        navTop={false}
        epEnable={true}
        onChange={this.onChange}
        forbidNavScroll={false}
        beforeSlide={this.beforeSlide}
      >
        <EpTabbar.Item style={[s.tabItem, { backgroundColor: '#18314F' }]}>
          <Text style={s.text}>tab1</Text>
        </EpTabbar.Item>
        <EpTabbar.Item style={[s.tabItem, { backgroundColor: '#384E77' }]}>
          <Text style={s.text}>tab2</Text>
        </EpTabbar.Item>
        <EpTabbar.Item style={[s.tabItem, { backgroundColor: '#8BBEB2' }]}>
          <Text style={s.text}>tab3</Text>
        </EpTabbar.Item>
      </EpTabbar>
    );
  }
};
const s = {
  navStyle: {
    width: 750,
    height: 88,
    backgroundColor: '#0D0630',
    justfiyContent: 'center'
  },
  focusStyle: {
    backgroundColor: '#E6F9AF',
    position: 'absolute',
    height: 88,
    width: NAV_ITEM_WIDTH,
    color: '#333'
  },
  navItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    fontSize: 28,
    fontWeight: 'bold',
    color: 'white'
  },
  tabItem: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    backgroundColor: 'red'
  },
  tabContainer: {
    flex: 1
  },
  text: {
    justifyContent: 'center',
    alignItems: 'center'
  }
};
render(<App />);
```