喜欢你就像站在灿烂的晴空下,玻璃心碎一地,每片渣却都在发光。

长久地思考一些问题,感觉到僵滞或不可动,有时貌似没有途径。但事情显然并非如此。身心的变化在行进。痛苦不断地切割意识,同时也重新锤炼内心结构。所有的痛苦都是有价值的,它代表问题被有活力地推出。...

react-native--万能Button封装

导语:在日常开发中,我们经常需要用过按钮,比如:提交,确认,登录。
其中,大部分的按钮都有如下需求:
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,
    }

});
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tiem_erhu/article/details/53510695
文章标签: 需求 字体
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭