npmchenwei111/app/public/authentication/views/AccreditationButton.js

test1111

/**
 * Created by chenwei on 2017/8/22.
 */
import React, { Component } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'

import { px, sp } from '../../../utils/Px2dp'
import R from '../../../assets/R'
import SolidLine from '../../../common/views/SolidLine'
import Device from '../../../utils/Device'
import Display from '../../../common/views/Display'
import Button from '../../../common/views/Button'
const PropTypes = require('prop-types')

class AccreditationButton extends Component {

  //设置必须属性的检测
  static propTypes = {
    info: PropTypes.object.isRequired,  //基本信息  logo,title
    statusData: PropTypes.object.isRequired, //状态信息 enable，checked，line
  }

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

  //初始化
  _initData () {
    this.statusData = {
      enable: true,
      checked: true,
      line: true,
      ...this.props.statusData
    }
  }

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

  _getIcon () {
    return this.props.info.logo
  }

  _getTitle () {
    return this.props.info.title
  }

  _getStatusIcon () {
    //优先判断check
    if (this.statusData.checked) {
      return R.img.ic_auth_checked_btn
    }
    return this.statusData.enable ? R.img.ic_auth_go_check_btn : R.img.ic_auth_unchecked_btn
  }

  render () {

    return (
      <View style={[{backgroundColor: R.color.white}, this.props.style]}>
        <Button
          onPress={this.statusData.enable && this.props.onPress}>
          <View style={styles.container}>
            <Image source={{uri: this._getIcon()}} style={styles.icon}/>
            <Text style={
              this.statusData.enable ? styles.title_enable : styles.title_unable
            }>{this._getTitle()}</Text>
            <Image source={this._getStatusIcon()} style={styles.statusIcon}/>
          </View>
        </Button>
        <Display visible={this.statusData.line}>
          <SolidLine style={{
            marginLeft: px(60)
          }}/>
        </Display>
      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    width: Device.width,
    flexDirection: 'row',
    height: px(60),
    alignItems: 'center'
  },

  icon: {
    width: px(30), height: px(30),
    marginLeft: px(16),
    marginTop: px(14),
    marginBottom: px(14),
    marginRight: px(10),
  },

  title_enable: {
    fontSize: sp(16),
    color: '#344552',
    textAlign: 'center'
  },

  title_unable: {
    fontSize: sp(16),
    color: '#BABFC9',
    textAlign: 'center'
  },

  statusIcon: {
    position: 'absolute',
    right: 0,
    width: px(70), height: px(21),
    resizeMode: Image.resizeMode.contain,
    marginRight: px(16)
  }
})

export default AccreditationButton