react-native--万能Button封装

Posted 2023-02-20 time_iter

导语：在日常开发中，我们经常需要用过按钮，比如：提交，确认，登录。
其中，大部分的按钮都有如下需求：
1-：点击与不可点击时背景颜色
2-：文案大小，字体颜色
3-：圆角，边框颜色

一：案例：
-1:props传递文案
-2:props传递是否可点击
-3:默认提供样式，样式可修改

import React, 
    Component
 from 'react'

import 
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
 from 'react-native'

export default class ConfirmButton extends Component 
    //使用时：enable是必须存在的
    static propTypes = 
        enable: React.PropTypes.bool.isRequired,
    ;

    render() 
        return (
            <View>
                this._renderButton()
            </View>
        );
    

    _renderButton() 
        //可点击与不点击样式不同
        if (this.props.enable===true) 
            return(
                <TouchableOpacity
                    onPress=this.props.onPress
                    //this.props.buttonStyle传入此样式属性，修改背景色，边框大小，颜色
                    style=[styles.button, this.props.buttonStyle]>
                    <View style=styles.viewText>
                       //this.props.textStyle传入此样式属性，修改字体大小，颜色
                        <Text style=[styles.textMeg, this.props.textStyle]>this.props.text</Text>
                    </View>
                </TouchableOpacity>
            );
         else 
            return(
                <View style=[styles.button, this.props.buttonStyle, styles.buttonNotEnable]>
                    <View style=styles.viewText>
                    //this.props.text传入此属性，可以动态修改文字
                        <Text style=styles.textMeg>this.props.text</Text>
                    </View>
                </View>
            );
        
    



const styles = StyleSheet.create(
    viewText: 
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    ,
    textMeg: 
        color: 'white',
        fontSize: 15,
    ,
    button: 
        height: 44,
        borderRadius: 5,
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center'
    ,
    buttonNotEnable: 
        backgroundColor: '#B8B8B8',
    
);

二：使用：

import React,Component from 'react'
import 
    StyleSheet,
    View,
 from 'react-native'

import ConfirmButton from './ConfirmButton'


export  default class ActionCustom extends Component
    constructor(props)
        super(props);
        this.state=
            click:false,
        
    

    render()
        return(
            <View>
                <ConfirmButton
                text='Frist'
                enable=true
                onPress=this.alertMsg/>

                <ConfirmButton
                    enable=this.state.click
                    text='enable'/>

                <ConfirmButton
                    enable=true
                    textStyle=styles.textStyle
                    text='Sencond'
                    buttonStyle=styles.container
                    onPress=this.changeState/>
            </View>
        );
    

    alertMsg=()=>
        alert("alertMsginInfo");
    


    changeState=()=>
     this.setState(
         click:true,
     )
    



const styles=StyleSheet.create(
    container:
        margin:20,
        backgroundColor:'white',
        borderColor:'red',
        borderRadius:5,
        borderWidth:2,
    ,
    textStyle:
        color:'red',
        fontSize:20,
    

);