bee-ui/src/BarChart/AxisX.js

import React, {
  PropTypes,
  Component,
} from 'react';
import {
  View,
  Text,
  StyleSheet,
} from 'react-native';

const styles = StyleSheet.create({
  bdWrap: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    // height: 30,
  },
  bd: {
    height: 3,
    width: 1,
    backgroundColor: '#DCDEE5',
  },
  textColor: {
    color: '#DCDEE5',
  },
});

class AxisX extends Component {
  static propTypes = {
    showAxisXLine: PropTypes.bool,
    label: PropTypes.string,
    style: PropTypes.object,
  }
  static defaultProps = {
    showAxisXLine: null,
    label: '',
    style: {},
  }
  render() {
    const showAxisXLine = this.props.showAxisXLine;
    const style = this.props.style;
    const isLine = showAxisXLine ? styles.bd : null;
    return (
      <View style={styles.bdWrap}>
        <View style={[isLine, { backgroundColor: style.borderColor }]} />
        <View><Text style={[styles.textColor, style]}>{this.props.label}</Text></View>
      </View>
    );
  }
}

export default AxisX;