React Native 封装自定义的Button

清疚 2022-05-09 13:46 262阅读 0赞

import React, { Component } from 'react';
    import {
        StyleSheet,
        View,
        Dimensions,
        TouchableOpacity,
        TouchableHighlight
    } from 'react-native';
    import Text from '../text';
    //模块声名并导出
    export default class Button extends Component { 
        //属性声名
        static propTypes = {
            txtStyle:React.PropTypes.any, // 文字颜色
            underlayColor:React.PropTypes.string, // 点击的时候按钮背景颜色
            underlayTxtColor:React.PropTypes.string, // 点击的时候文字颜色
            onPress: React.PropTypes.func, // 点击事件
            onPressOut: React.PropTypes.func, // 结束点击的时候触发事件
            onLongPress: React.PropTypes.func, // 长按事件
            imageView: React.PropTypes.element, // 图片
    
        };
    
        //默认属性
        static defaultProps = {
            underlayColor: '#00000000',
            underlayTxtColor: '#00000088',
            txtStyle: { color: '#000000' },
            imageView: null,
            disabled: false
        }
        //构造函数
        constructor(props) {
            super(props);
            // console.log(this.props);
            this.state = { //状态机变量声明
                showButtonTxt: true,
                onShowUnderlay: false
            }
        }
    
        onShowUnderlay = () => {
            // alert('_onShowUnderlay');
            this.setState({ onShowUnderlay: true });
        }
    
        onHideUnderlay = () => {
            // alert('_onHideUnderlay');
            this.setState({ onShowUnderlay: false });
        }
    
        //渲染
        render() {
            return (
                <TouchableHighlight
                    onShowUnderlay={
       this.onShowUnderlay}
                    onHideUnderlay={
       this.onHideUnderlay}
                    underlayColor={
       this.props.underlayColor}
                    onPress={
       this.props.onPress}
                    onLongPress={
       this.props.onLongPress}
                    onPressOut={
       this.props.onPressOut}
                    style={[styles.button, this.props.style]}
                    disabled={
       this.props.disabled}
                >
                    {
       this.state.showButtonTxt
                        //样式继承,带条件样式
                        ? <View style={
       { flexDirection: 'row',justifyContent:'center',alignItems:'center',paddingLeft:5,paddingRight:5 }}>
                            {
       this.props.imageView ? <View style={
       { marginRight: 5 }}>{
       this.props.imageView}</View> : null}
                            <Text
                                style={[styles.txt, this.props.txtStyle, this.state.onShowUnderlay && {color: this.props.underlayTxtColor}]}>
                                {
       //显示成员变量
                                    this.props.children}
                            </Text>
                        </View>
                        : null}
    
                </TouchableHighlight>
            );
        }
    };
    
    const styles = StyleSheet.create({
        button: {
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
    
        },
        txt: {
            textAlign: 'center',
        }
    })
    
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43
       44
       45
       46
       47
       48
       49
       50
       51
       52
       53
       54
       55
       56
       57
       58
       59
       60
       61
       62
       63
       64
       65
       66
       67
       68
       69
       70
       71
       72
       73
       74
       75
       76
       77
       78
       79
       80
       81
       82
       83
       84
       85
       86
       87
       88
       89
       90
       91
       92
       93

**调用组件**

<Button underlayColor={Constant.colorTxtPrimary} underlayTxtColor='#FFFFFF' txtStyle={ { color: '#FFFFFF', fontSize: 18, textAlign: 'center'}} style={ { height: 40, width: width - 80, padding: 0, backgroundColor: 'pink',borderRadius: 4, marginTop: 25}} onPress={() => this.loginBtnClick()}> 登录 </Button>
     
      
       1
       2
       3
       4
       5
       6
       7
       8