# Tabbar Demo

- order: 1

item 在顶部

-----------

````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 ScrollView from  'nuke-scroll-view';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state =  {
      activeKey: {key: 'tab1'}
    };
  }
  renderContent = (pageText) => {
    return (
      <ScrollView style={styles.tabContent}>
        <Text style={styles.tabText}>Tabbar 在顶部的场景，一般不放 icon</Text>
        <Text style={styles.tabText}>{pageText}</Text>
        <View style={{height:1900,width:750}}></View>
      </ScrollView>
    );
  }
  renderItem = (Name,isActive, key) =>{
    return (<View style={styles.item}>
        <Text style={[styles.itemText,isActive ? styles.activeText:{}]}>{Name}</Text>
    </View>);
  }
  render() {
    return (
      <Tabbar navTop={true} navStyle={{active: styles.activeBorder}}
      activeKey={this.state.activeKey} itemStyle={{height:70,backgroudColor:'green',boxShadow:'0 2px 4px 0 red'}} navScrollable={true}>
        <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,'已卖出')}>
          {this.renderContent('tab2')}
        </Tabbar.Item>
        <Tabbar.Item
          tabKey="tab3"
          render={this.renderItem.bind(this,'我的购物篮')}>
          {this.renderContent('tab3')}
        </Tabbar.Item>
        <Tabbar.Item
          tabKey="tab4"
          render={this.renderItem.bind(this,'我的购物篮')}>
          {this.renderContent('tab3')}
        </Tabbar.Item>
        <Tabbar.Item
          tabKey="tab5"
          render={this.renderItem.bind(this,'我的购物篮')}>
          {this.renderContent('tab3')}
        </Tabbar.Item>
        <Tabbar.Item
          tabKey="tab6"
          render={this.renderItem.bind(this,'我的购物篮')}>
          {this.renderContent('tab3')}
        </Tabbar.Item>
      </Tabbar>
    );
  }
}
const styles = {
  tabContent:{
    flex:1,
    backgroundColor:'#dddddd',
    alignItems: 'center',
    justifyContent:'center'
  },
  tabText: {
    fontSize:30,
    textAlign:'center'
  },
  item:{
    height:70,
    width:220,
    alignItems: 'center',
    justifyContent:'center',
    borderBottomWidth:'2',
    borderBottomStyle:'solid',
    borderBottonColor:'red'
  },
  activeText:{
    color:'#ff6600'
  },
  activeBorder:{
    borderBottomWidth:'0px',
    borderBottomColor:'transparent'
  }
}
render(<App />);
````