npmchenwei111/app/common/views/ColorButton.js

test1111

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

import React, { Component } from 'react'
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { px2dp } from '../../utils/Px2dp'
import { ClickUtils } from '../../utils/ClickUtils'

/**
 * 纯色的button
 */
class ColorButton extends Component {

  /**
   * 属性说明
   *
   * 基本参数
   *
   * ...data 见_initData() //参数存放在data里
   *
   * onPress() :function 点击函数
   *
   *
   *
   */

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

  //初始化
  _initData () {
    this.data = {
      enable: true,
      fontSize: 16,
      color: 'fff',  //文字颜色
      text: 'Button',

      drawableLeft: 0, //文字左边图片设置
      drawableRight: 0, //文字右边图片设置
      ...this.props.data
    }
  }

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

  componentWillUnmount () {
    this.timer && clearTimeout(this.timer)
  }

  render () {

    return (
      <TouchableOpacity
        activeOpacity={this.props.onPress && this.data.enable ? 0.7 : 1.0}
        onPress={
          ClickUtils.onPress(this.data.enable ? this.props.onPress : null)
        }
      >
        <View
          style={[styles.center, this.props.style]}>
          {
            this.data.drawableLeft ?
              <Image style={{marginRight: px2dp(4), height: px2dp(20), width: px2dp(20), resizeMode: 'contain'}}
                     source={this.data.drawableLeft}/> : null
          }
          <Text style={{
            fontSize: this.data.fontSize,
            color: this.data.color
          }}>{this.data.text}</Text>
          {
            this.data.drawableRight ? <Image style={{
              marginLeft: px2dp(4), height: px2dp(20), width: px2dp(20), resizeMode: 'contain'
            }} source={this.data.drawableRight}/> : null
          }
        </View>
      </TouchableOpacity>
    )
  }

}

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

export default ColorButton