npmchenwei111/app/views/CreditLinePanel.js

test1111

/**
 * Created by chenwei on 2017/8/22.
 * 额度面板
 */

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import R from '../assets/R'
import { px, sp } from '../utils/Px2dp'
import HorizontalRoundProgressBar from './HorizontalRoundProgressBar'
import BackgroundView from '../common/views/BackgroundView'

const PropTypes = require('prop-types')

class CreditLinePanel extends Component {

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

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

  //初始化state
  _initData () {
    this.data = {
      loanStatus: '',
      ...this.props.data
    }
  }

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

  _readerCreditLineText () {
    return this.data.loanStatus.fullLoanLimit ? (
      <View style={styles.row_center}>
        <Text style={styles.small_font}>已获取</Text>
        <Text style={styles.big_font}>{this.data.loanStatus.fullLoanLimit}</Text>
        <Text style={styles.small_font}> 额度</Text>
      </View>
    ) : (
      <View>
        <Text style={styles.big_font}>未知额度</Text>
      </View>
    )
  }

  _readerHorizontalRoundProgressBar () {
    return <HorizontalRoundProgressBar
      bar_height={px(20)}
      bar_width={px(260)}
      data={{
        text: this.data.loanStatus.fillStatus,
        progress: 100 * this.data.loanStatus.count / this.data.loanStatus.fillNum,
      }}
    />
  }

  render () {
    return (
      <BackgroundView
        data={{
          source: R.img.bg_auth_amount_panel
        }}
        style={[styles.container, this.props.style]}>
        <View style={{marginTop: px(42)}}>{this._readerCreditLineText()}</View>
        <View style={{marginTop: px(5)}}>{this._readerHorizontalRoundProgressBar()}</View>
      </BackgroundView>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    width: px(343),
    height: px(160),
    alignItems: 'center',
    backgroundColor: '#ff5849',
    borderRadius: px(6),
    elevation: px(6),
    shadowOpacity: 0.38,
    shadowRadius: px(6),
    shadowOffset: {h: 0, w: 0},
  },

  row_center: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  big_font: {
    backgroundColor: R.color.transparent,
    color: R.color.white,
    fontSize: sp(36),
    textAlign: 'center'
  },
  small_font: {
    backgroundColor: R.color.transparent,
    color: R.color.white,
    fontSize: sp(14),
    textAlign: 'center',
    marginBottom: px(6),
  },

})

export default CreditLinePanel