weex-nuke/docs/tabbar/demo/basic-top.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Tabbar Demo

- order: 1

item 在顶部

---

```js
/** @jsx createElement */
import { View, Text, Touchable, Tabbar } from 'weex-nuke';

import { createElement, Component, render } from 'rax';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      activeKey: { key: 'tab1' }
    };
  }
  renderContent = (pageText) => {
    return (
      <View style={styles.tabContent}>
        <Text style={styles.tabText}>Tabbar 在顶部的场景，一般不放 icon</Text>
        <Text style={styles.tabText}>{pageText}</Text>
      </View>
    );
  };
  renderItem = (Name, isActive, key) => {
    return (
      <View style={styles.item}>
        <Text style={[styles.itemText, isActive ? styles.activeText : {}]}>{Name}</Text>
      </View>
    );
  };
  render() {
    return (
      <Tabbar
        navTop={true}
        navScrollable={true}
        navStyle={{ active: styles.activeBorder }}
        activeKey={this.state.activeKey}
        itemStyle={{ height: 96 }}>
        <Tabbar.Item tabKey="tab1" style={styles.item} render={this.renderItem.bind(this, '全部')}>
          {this.renderContent('tab1')}
        </Tabbar.Item>
        <Tabbar.Item tabKey="tab2" render={this.renderItem.bind(this, '已卖出（888）')}>
          {this.renderContent('tab2')}
        </Tabbar.Item>
        <Tabbar.Item tabKey="tab3" render={this.renderItem.bind(this, '已买到（2）')}>
          {this.renderContent('tab3')}
        </Tabbar.Item>
        <Tabbar.Item tabKey="tab4" render={this.renderItem.bind(this, '退款中（0）')}>
          {this.renderContent('tab4')}
        </Tabbar.Item>
        <Tabbar.Item tabKey="tab5" render={this.renderItem.bind(this, 'tab5555')}>
          {this.renderContent('tab5')}
        </Tabbar.Item>
      </Tabbar>
    );
  }
};
const styles = {
  tabContent: {
    flex: 1,
    backgroundColor: '#dddddd',
    alignItems: 'center',
    justifyContent: 'center'
  },
  tabText: {
    fontSize: 30,
    textAlign: 'center'
  },
  item: {
    height: 96,
    paddingLeft: 20,
    paddingRight: 20
  },
  activeText: {
    color: '#ff6600'
  },
  itemText: {
    lineHeight: 96,
    whiteSpace: 'nowrap'
  },
  activeBorder: {
    borderBottomColor: '#ff6600'
  }
};
render(<App />);
```