bee-ui/src/TabBar/index.js

import React, {
  Component,
  ViewStylePropTypes,
  PropTypes,
} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Animated,
} from 'react-native';
import Touch from '../Touch';

const styles = StyleSheet.create({
  activeTextStyle: {
    color: '#82A0FA',
  },
  tabDeafultText: {
    color: '#888',
  },
  tabBackground: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  defaultTabBarStyle: {
    // flex: 1,
    height: 50,
    flexDirection: 'row',
    justifyContent: 'space-around',
    borderWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderColor: '#ccc',
  },
  hideUnderline: {
    backgroundColor: 'blue',
    height: 2,
    opacity: 0,
  },
  showUnderline: {
    backgroundColor: 'blue',
    height: 2,
  },
});
class TabBar extends Component {
  static propTypes = {
    tabs: PropTypes.arrayOf(PropTypes.any),
    goToScene: PropTypes.func,
    renderTab: PropTypes.func,
    activeTextStyle: Text.propTypes.style,
    defaultTextStyle: Text.propTypes.style,
    tabBarStyle: ViewStylePropTypes || (View.propTypes && View.propTypes.style),
    tabUnderLineStyle: ViewStylePropTypes || (View.propTypes && View.propTypes.style), // 下划线背景
    onChangeTab: PropTypes.func, // onPress事件
    activeTab: PropTypes.number,
  }
  static defaultProps = {
    tabs: [],
    goToScene: null,
    renderTab: () => {},
    activeTextStyle: styles.activeTextStyle,
    tabBarPosition: null,
    onChangeTab: null,
    defaultTextStyle: styles.tabDeafultText,
    tabUnderLineStyle: null,
    tabBarStyle: null,
    activeTab: null,
  }
  constructor(props) {
    super(props);
    this.state = {
      widthValue: new Animated.Value(0),
    };
  }

  renderTab = (tabLabel, key, onPressHandler) => {
    const {
      activeTextStyle,
      defaultTextStyle,
      onChangeTab,
      tabUnderLineStyle,
      activeTab,
    } = this.props;

    const isTabActive = activeTab === key;

    const textColor = isTabActive ? activeTextStyle : defaultTextStyle;

    const underline = isTabActive ? (<View style={[styles.showUnderline, tabUnderLineStyle]} />) : <View style={styles.hideUnderline} />;

    return (<Touch
      style={[{ flex: 1 }]}
      key={tabLabel}
      accessible
      accessibilityLabel={tabLabel}
      accessibilityTraits="button"
      onPress={() => onPressHandler(key)}
    >
      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center' }}>
        <View style={styles.tabBackground}>
          <Text style={textColor}>{tabLabel}</Text>
        </View>
        {underline}
      </View>
    </Touch>);
  }

  render() {
    const {
      tabs,
      goToScene,
      tabUnderLineStyle,
      tabBarStyle,
    } = this.props;
    return (
      <View style={[styles.defaultTabBarStyle, tabBarStyle]}>
        { tabs.map((tabLabel, key) => {
          const name = tabLabel;
          const renderTab = this.props.renderTab || this.renderTab;
          const Tab = this.renderTab(name, key, goToScene);
          return Tab;
        })}
      </View>
    );
  }
}
export default TabBar;