React Native Button封裝

react native 開發時,自帶的button組件不能滿足我們的開發需求。不支持背景圖等設置。所以封裝了一個簡單的button 。代碼如下

import React from "react";
import {
    Text,
    View,
    StyleSheet,
    TouchableOpacity,
    Image
} from "react-native";

const styles = StyleSheet.create({
    ButtonStyle: {
        justifyContent: "center",
        alignItems: "center"
    },
    contentStyle: {
        backgroundColor: "transparent"
    },
    Text: {
        textAlign: "center"
    },
    backgroundImage: {
        width: "100%",
        height: "100%",
        position: "absolute",
        zIndex: -2,
        alignSelf: "center"
    }
});

class Button extends React.Component {
    constructor(props) {
        super(props);
    }
    static defaultProps = {
        style: {},
        enable: true,
        textStyle: {},
        backgroundImage: null,
        backgroundImageStyle: {},
        type: "default"
    };

    render() {
        return (
            //可點擊
            <TouchableOpacity
                onPress={this.props.onPress}
                style={[styles.ButtonStyle, this.props.style]}
                disabled={
                    this.props.hasOwnProperty("enable") ? !this.props.enable : false
                }
            >
                {this.props.hasOwnProperty("title") ? (
                    <Text
                        style={[styles.Text, this.props.textStyle]}
                    >
                        {this.props.title}
                    </Text>
                ) : null}
                {this.props.hasOwnProperty("backgroundImage") ? (
                    <Image
                        source={this.props.backgroundImage}
                        style={[styles.backgroundImage, this.props.backgroundImageStyle]}
                    />
                ) : null}
                <View style={styles.contentStyle} />
            </TouchableOpacity>
        );
    }
}

export default Button;
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容