content: /**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  
  import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    Platform,
    Navigator
  } from 'react-native';
  
  import Constanst from './Global/Constant.js';
  import TabNavigator from 'react-native-tab-navigator';
  import Home from './Home/Home.js';
  import Community from './Community/Community.js';
  import Mall from './Mall/Mall.js';
  import Me from './Me/Me.js';
  
  const TAB_ICON_HOME = require('../res/images/tab/tab_icon_home@3x.png');
  const TAB_ICON_HOME_SEL = require('../res/images/tab/tab_icon_home_sel@3x.png');
  const TAB_ICON_MALL = require('../res/images/tab/tab_icon_mall@3x.png');
  const TAB_ICON_MALL_SEL = require('../res/images/tab/tab_icon_mall_sel@3x.png');
  const TAB_ICON_COMMUNITY = require('../res/images/tab/tab_icon_community@3x.png');
  const TAB_ICON_COMMUNITY_SEL = require('../res/images/tab/tab_icon_community_sel@3x.png');
  const TAB_ICON_ME = require('../res/images/tab/tab_icon_me@3x.png');
  const TAB_ICON_ME_SEL = require('../res/images/tab/tab_icon_me_sel@3x.png');
  
  var tabHeight = 52;
  
  export default class TabbarSite extends Component {
  
    constructor(props) {
      super(props);
  
      this.onPress = this.onPress.bind(this);
  
      this.state = {
        navigator:this.props.navigator,
        route:this.props.route,
        selectedTab: Me,
        title:'Name',
      };
    }
  
    onPress(module,title){
      this.setState({ selectedTab: module});
      var route = this.props.navigator.navigationContext.currentRoute;
      route.title = title;
      this.props.navigator.replace(route);
    }
  
    _renderTabItem(module,icon,icon_sel,moduletitle){
          return (<TabNavigator.Item
              selected={ this.state.selectedTab === module }
              title={moduletitle}
              renderIcon={() => <Image source={icon} />}
              renderSelectedIcon={() => <Image source={icon_sel} />}
              onPress={()=>this.onPress(module,moduletitle)}>
              {this._renderView(module)}
            </TabNavigator.Item>);
      }
  
    _renderView(pageName:string,num?:number){
      var renderView;
      if (pageName == Home) {
        renderView = <Home navigator={this.state.navigator} route={this.state.route}/>
      }
      else if (pageName == Community) {
        renderView = <Community />;
      }
      else if (pageName == Mall) {
        renderView = <Mall />;
      }
      else if (pageName == Me) {
        renderView = <Me navigator={this.state.navigator} route={this.state.route}/>;
      }
      return renderView;
    }
  
    render() {
      return (
        //背景色,半透明,前景色
        <TabNavigator barTintColor='#f9f9f9' tintColor='#37c4f6' tabBarStyle={styles.tab}> 
        {this._renderTabItem(Home,TAB_ICON_HOME,TAB_ICON_HOME_SEL,'首页')}
        {this._renderTabItem(Community,TAB_ICON_COMMUNITY,TAB_ICON_COMMUNITY_SEL,'社区')}
        {this._renderTabItem(Mall,TAB_ICON_MALL,TAB_ICON_MALL_SEL,'商城')}
        {this._renderTabItem(Me,TAB_ICON_ME,TAB_ICON_ME_SEL,'我')}
        </TabNavigator>
      );
    }
  }
  
  const styles = StyleSheet.create({
      tab: {
          height: 49,
          backgroundColor: '#ffffff',
          alignItems: 'center',
      },
      tabIcon: {
          width: 30,
          height: 35,
          resizeMode: 'stretch',
          marginTop: 12.5
      }
  });
  
  // <TabNavigator.Item
  //   selected={this.state.selectedTab === 'Home'}
  //   title="首页"
  //   renderIcon={() => <Image source={require('../res/images/tab/tab_icon_home@3x.png')} />}
  //   renderSelectedIcon={() => <Image source={require('../res/images/tab/tab_icon_home_sel@3x.png')} />}
  //   badgeText="0"
  //   onPress={() => this.setState({ selectedTab: 'Home' })}>
  //   {this._renderView(Home)}
  // </TabNavigator.Item>
  // <TabNavigator.Item
  //   selected={this.state.selectedTab === 'Me'}
  //   title="我"
  //   renderIcon={() => <Image source={require('../res/images/tab/tab_icon_me@3x.png')} />}
  //   renderSelectedIcon={() => <Image source={require('../res/images/tab/tab_icon_me_sel@3x.png')} />}
  //   badgeText="1"
  //   onPress={() => this.setState({ selectedTab: 'Me' })}>
  //   {this._renderView(Me)}
  // </TabNavigator.Item>