npmchenwei111/app/views/orderdetail/EmptyRepayItemView.js

test1111

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

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

/**
 * 订单详情-还款计划空Item View
 */
class EmptyRepayItemView extends Component {

  /**
   * 属性说明
   *
   * 基本参数
   *
   * ...data 见_initData() //参数存放在data里
   *
   *
   *
   */

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

  //初始化state
  _initData () {
    this.data = {
      title: '还款计划',
      content: '该机构暂不提供还款明细',
      backgroundColor: '#fff',
      ...this.props.data
    }
  }

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

  render () {
    return (
      <View style={
        {backgroundColor: this.data.backgroundColor, flexDirection: 'column', height: px(108), ...this.props.style}}>

        <Text style={styles.title}>
          {this.data.title}
        </Text>

        <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
          <Text style={styles.content}>
            {this.data.content}
          </Text>
        </View>

      </View>
    )
  }

}

const styles = StyleSheet.create({
  title: {
    paddingLeft: px(16),
    paddingRight: px(16),
    paddingBottom: px(8),
    paddingTop: px(8),
    backgroundColor: R.color.transparent,
    color: R.color.font_black,
    fontSize: sp(14),
  },
  content: {
    textAlign: 'center',
    backgroundColor: R.color.transparent,
    color: R.color.font_white_gray,
    fontSize: sp(14),
  }
})

export default EmptyRepayItemView