npmchenwei111/app/views/HorizontalRoundProgressBar.js

test1111

/**
 * Created by chenwei on 2017/8/22.
 * 横向的圆角ProgressBar
 */
import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { sp } from '../utils/Px2dp'
const PropTypes = require('prop-types')

class HorizontalRoundProgressBar extends Component {

  //设置必须属性的检测
  static propTypes = {
    bar_height: PropTypes.number.isRequired,
    bar_width: PropTypes.number.isRequired,
  }

  constructor (props) {
    super(props)
    this._initData()
  }

  //初始化state
  _initData () {
    this.data = {
      max: 100,
      progress: 0,
      text: '',
      front_color: '#f9d5cd',
      background_color: '#ffffff44',
      text_color: '#940f0e',
      ...this.props.data
    }
  }

  //@Override 重写方法
  componentWillReceiveProps (nextProps) {
    this.data = {...this.data, ...nextProps.data}
  }

  _renderBackground (width, height) {
    return <View style={{
      width: width,
      height: height,
      borderRadius: height / 2,
      backgroundColor: this.data.background_color
    }}/>
  }

  _renderFront (width, height) {
    return <View style={{
      width: width,
      height: height,
      borderRadius: height / 2,
      backgroundColor: this.data.front_color
    }}/>
  }

  _renderText () {
    return <Text style={{
      color: this.data.text_color,
      textAlign: 'center',
      fontSize: sp(12),
      backgroundColor: '#00000000'
    }}>{this.data.text}</Text>
  }

  render () {

    const {bar_width, bar_height} = this.props

    return (
      <View style={styles.container}>
        <View style={[styles.positionLeft, {width: bar_width, height: bar_height}]}>
          {
            this._renderBackground(bar_width, bar_height)
          }
        </View>
        <View style={[styles.positionLeft, {width: bar_width, height: bar_height}]}>
          {
            this._renderFront(bar_width * this.data.progress / this.data.max, bar_height)
          }
        </View>
        <View style={[styles.positionCenter, {width: bar_width, height: bar_height}]}>
          {
            this._renderText()
          }
        </View>

      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },

  positionLeft: {
    position: 'absolute',
    top: 0,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },

  positionCenter: {
    position: 'absolute',
    top: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  }
})

export default HorizontalRoundProgressBar