kangaroo/js/component/MyButton.js

import React, { Component } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import PropTypes from 'prop-types'
export default class MyButton extends Component {
    static defaultProps = {
        bgColor: '#000',
        fColor: '#fff',
        borderColor: null,
        borderWidth:null
    };
    static propTypes = {
        //按钮宽度
        width: PropTypes.string.isRequired,
        //按钮高度
        height: PropTypes.string.isRequired,
        //按钮的圆度
        borderRadius: PropTypes.string.isRequired,
        //文本的样式
        style: PropTypes.object,
        //背景颜色
        bgColor: PropTypes.string,
        //字体颜色
        fColor: PropTypes.string,
        //文本
        text: PropTypes.string.isRequired,
        //按钮事件
        onPress: PropTypes.func.isRequired,
        //用于给残障人士显示的文本
        accessibilityLabel: PropTypes.string
    }
    render() {
        let { style, bgColor, fColor, text, accessibilityLabel, width, height, borderRadius, shadowBgc, borderColor, borderWidth } = this.props
        return (
            <TouchableOpacity onPress={this.props.onPress}>
                <View style={{
                    width: width,
                    height: height,
                    backgroundColor: bgColor,
                    justifyContent: "center",
                    alignItems: "center",
                    shadowRadius: 5,
                    shadowOpacity: 0.3,
                    shadowOffset: { width: -2, height: 2 },
                    shadowColor: shadowBgc,
                    borderRadius: borderRadius,
                    borderWidth: borderWidth,
                    borderColor: borderColor
                }}>
                    <Text style={{
                        fontWeight: 'bold',
                        color: fColor,
                        ...style
                    }}
                        accessibilityLabel={accessibilityLabel}
                    >{text}</Text>
                </View>
            </TouchableOpacity>
        )
    }
}