npmchenwei111/app/common/views/GradientButton.js

test1111

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

import React, { Component } from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import { ClickUtils } from '../../utils/ClickUtils'

class GradientButton extends Component {

  /**
   * 属性说明
   *
   * 基本参数
   *
   * ...data  //见data
   *
   *
   */


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

  //初始化state
  _initData () {
    this.data = {
      enable: true,
      borderRadius: 0,
      fontSize: 16,
      color: '#fff',
      text: '',

      colorStart: '#FF4645',
      colorEnd: '#FF4645',
      unColorStart: '#CDCDCD',
      unColorEnd: '#CDCDCD',

      ...this.props.data
    }
  }

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

  render () {

    return (
      <TouchableOpacity
        activeOpacity={this.props.onPress && this.data.enable ? 0.7 : 1.0}
        onPress={
          ClickUtils.onPress(this.data.enable ? this.props.onPress : null)
        }
      >
        <LinearGradient
          colors={
            this.data.enable ? [this.data.colorStart, this.data.colorEnd] : [this.data.unColorStart, this.data.unColorEnd]
          }
          start={{x: 0, y: 1}}
          end={{x: 1, y: 1}}
          style={[{
            borderRadius: this.data.borderRadius,
          }, styles.center, this.props.style]}
        >
          <View style={styles.center}>
            <Text style={{
              fontSize: this.data.fontSize,
              color: this.data.color,
              backgroundColor: '#00000000',
              textAlign: 'center'
            }}>{this.data.text}</Text>
          </View>
        </LinearGradient>
      </TouchableOpacity>
    )
  }

}

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

export default GradientButton