123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- 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>
- )
- }
- }
|