rn-project/src/components/buttons.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

'use strict';

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import BaseStyle from '../constants/Style';
import PropTypes from 'prop-types';
import ViewUtil from '../utils/View';

/**
 * 使用方法
 * 
 * 
 * import Btn from '../components/button';
 *  <Btn
      text={'确定'}
    />

 */

export default class Button extends Component {
  static propTypes = {
    text: PropTypes.string, //按钮文字
    disabletext: PropTypes.string, //禁用时的按钮文字
    textColor: PropTypes.string, //按钮文字颜色
    disabled: PropTypes.bool, //按钮是否是禁用状态
    bgColor: PropTypes.string, //按钮的背景色
    disablebgColor: PropTypes.string, //禁用时的按钮的背景色
    disabledBtnStyle: PropTypes.any, //禁用时的按钮自定义样式
    btnStyle: PropTypes.any, //自定义按钮样式
    disableTextColor: PropTypes.string, //禁用的文字颜色
    disabledBtnTextStyle: PropTypes.any, //禁用时的按钮文字自定义样式
    btnTextStyle: PropTypes.any, // 按钮文字样式自定义
    size: PropTypes.number, //按钮文字大小
    onPress: PropTypes.func,
    activeOpacity: PropTypes.number, //透明度
    underlayColor: PropTypes.string, //按钮底色
  };

  constructor(props) {
    super(props);
  }

  render() {
    const {
      text,
      disabletext,
      textColor,
      disabled,
      bgColor,
      disabledBtnStyle,
      btnStyle,
      disableTextColor,
      disabledBtnTextStyle,
      disablebgColor,
      btnTextStyle,
      size,
      onPress,
      underlayColor,
      activeOpacity,
    } = this.props;
    return (
      <View>
        {disabled == true ? (
          <View style={styles.ButtonView}>
            <View
              style={[
                styles.tochView,
                { backgroundColor: disablebgColor },
                disabledBtnStyle,
              ]}>
              <Text
                style={[
                  { color: disableTextColor, fontSize: size },
                  disabledBtnTextStyle,
                ]}>
                {disabletext}
              </Text>
            </View>
          </View>
        ) : (
          <View style={styles.ButtonView}>
            <TouchableHighlight
              activeOpacity={activeOpacity}
              underlayColor={underlayColor}
              style={[styles.tochView, { backgroundColor: bgColor }, btnStyle]}
              onPress={onPress}>
              <Text
                style={[{ color: textColor, fontSize: size }, btnTextStyle]}>
                {text}
              </Text>
            </TouchableHighlight>
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  ButtonView: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    width: ViewUtil.size.width,
  },
  tochView: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    flex: 1,
    paddingTop: 15,
    paddingBottom: 15,
    marginLeft: 20,
    marginRight: 20,
    borderRadius: 22.5,
    backgroundColor: 'rgb(255,180,0)',
    // shadowColor: 'rgba(255, 180, 1, 0.37)',
    // shadowOffset: {
    //   width: 0,
    //   height: 3,
    // },
    // shadowRadius: 4.7,
    // shadowOpacity: 1,
  },

  buttonText: {
    fontSize: 15,
    color: '#ffffff',
  },
  disablebuttonViewColor: {
    backgroundColor: '#cccccc',
    shadowColor: 'rgba(204, 204, 204, 0.37)',
  },
  disablebuttonText: {
    fontSize: 15,
    color: '#ffffff',
  },
});
Button.defaultProps = {
  text: '确定',
  disabletext: '确定',
  textColor: '#ffffff',
  disabled: false,
  bgColor: 'rgb(255,180,0)',
  disablebgColor: '#cccccc',
  disabledBtnStyle: styles.disablebuttonViewColor,
  btnStyle: styles.tochView,
  disableTextColor: '#ffffff',
  disabledBtnTextStyle: styles.disablebuttonText,
  btnTextStyle: styles.buttonText,
  size: 15,
  isShadow: false,
  activeOpacity: 0,
  underlayColor: 'rgb(255,180,0)',
};