導語：在日常開發中，我們經常需要用過按鈕，比如：提交，確認，登入。
其中，大部分的按鈕都有如下需求：
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,
    }

});