npmchenwei111/app/views/borrowdetail/CompanyTitleStarView.js

test1111

/**
 * Created by chenwei on 2017/7/17.
 */

import React, { Component } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import R from '../../assets/R'
import { px } from '../../utils/Px2dp'

const PropTypes = require('prop-types');

class CompanyTitleStarView extends Component {

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

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

  //初始化state
  _initData () {
    this.data = {
      companyUrl: '',
      companyName: '',
      companyNameColor: R.color.white,
      companyStar: 0,
      ...this.props.data
    }
  }

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

  render () {
    return (
      <View style={[styles.container, this.props.style]}>

        <Image style={{width: px(38.5), height: px(38.5)}} source={{uri: this.data.companyUrl}}/>

        <Text style={{
          marginLeft: px(10),
          marginRight: px(5),
          textAlign: 'center',
          color: this.data.companyNameColor,
          backgroundColor: R.color.transparent
        }}>{this.data.companyName}</Text>
        {
          this._renderStars(this.data.companyStar)
        }
      </View>
    )
  }

  /**
   * 5颗星星
   * @param star
   * @returns {Array}
   * @private
   */
  _renderStars (star) {
    let arr = []
    for (let i = 1; i <= 5; i++) {
      arr.push(
        <Image
          key={i}
          style={{
            resizeMode: 'contain',
            width: px(20),
            height: px(15),
          }}
          source={star >= i ? R.img.ic_yellow_star : R.img.ic_yellow_no_star}/>
      )
    }
    return arr
  }

}

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

export default CompanyTitleStarView