rn-btn/index.js

react native, button

import React, { Component } from 'react'
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native'

export default class RNButton extends Component {
    _getTheme () {
        if (this.props.type && this.props.type === 'text') {
            return `${this.props.theme}Txt`
        } else {
            return `${this.props.theme}Btn`
        }
    }

    _getDisabled () {
        if (this.props.type && this.props.type === 'text') {
            return 'disabledTxt'
        } else {
            return 'disabledBtn'
        }
    }

    render () {
        let btnActiveOpacity = this.props.disabled ? 1 : .5

        return (
            <TouchableOpacity 
                activeOpacity={btnActiveOpacity} 
                style={[
                    myButton.buttonBox,
                    this.props.shadow && myButton.shadow
                ]}
                onPress={() => {
                    // 判断是否不是 disabled = true
                    if (!this.props.disabled && this.props.callback) {
                        this.props.callback(this)
                    }
                }}
            >
                <Text style={[
                    // 组件样式
                    myButton.btn, 
                    this.props.size && myButton[this.props.size],
                    this.props.type && myButton.textBtn,
                    this.props.theme && myButton[this._getTheme()],
                    this.props.disabled && myButton[this._getDisabled()],
                    // 用户样式
                    this.props.style,
                    this.props.disabledStyle
                ]}
                >{this.props.text}</Text>
            </TouchableOpacity>
        )
    }
}

/*
    样式优化级
    用户定义的 disabled(disabledStyle) > 用户定义的按钮(style) > disabled 样式 > 按钮
*/
const myButton = StyleSheet.create({
    buttonBox: { 
    },
    btn: {
        padding: 12,
        paddingLeft: 30,
        paddingRight: 30,
        fontSize: 14,
        color: '#333',
        textAlign: 'center',
        overflow: 'hidden',
        backgroundColor: '#f5f5f5'
    },
    small: {
        padding: 6,
        fontSize: 12,
        color: '#333',
        backgroundColor: '#f5f5f5'
    },
    large: {
        padding: 16,
        paddingLeft: 35,
        paddingRight: 35,
        fontSize: 18,
        color: '#333',
        backgroundColor: '#f5f5f5'       
    },
    huge: {
        padding: 18,
        paddingLeft: 40,
        paddingRight: 40,
        fontSize: 24,
        color: '#333',
        backgroundColor: '#f5f5f5'       
    },

    // theme
    mainBtn: {
        color: '#fff',
        backgroundColor: '#3C80E8'
    },
    warnBtn: {
        color: '#fff',
        backgroundColor: '#F90'
    },
    errorBtn: {
        color: '#FFF',
        backgroundColor: '#ed3f14'
    },
    textBtn: {
        color: '#333',
        backgroundColor: 'rgba(0,0,0,0)'
    },
    mainTxt: {
        color: '#3C80E8',
        backgroundColor: 'rgba(0,0,0,0)'
    },
    warnTxt: {
        color: '#F90',
        backgroundColor: 'rgba(0,0,0,0)'
    },
    errorTxt: {
        color: '#ed3f14',
        backgroundColor: 'rgba(0,0,0,0)'
    },

    disabledBtn: {
        color: '#999',
        backgroundColor: '#eee'
    },
    disabledTxt: {
        color: '#999',
        backgroundColor: 'rgba(0,0,0,0)'
    },

    shadow: {
        shadowColor: '#000',
		shadowRadius: 5,
		shadowOffset: {
			width: 0,
			height: 0
		},
		shadowOpacity: .2 
    }
})