hcmobile-sdk/components/button/ButtonDemo.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Button from './index';
import BtnBg from '../../images/appointmentBtn.png';

// create a component
class ButtonDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        默认样式：
                    </Text>
                    <Button
                        text = '自定义Button'
                        onPress = {() => {
                            alert('OK');
                        }}
                    />
                </View>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        自定义边框：
                    </Text>
                    <Button
                        text = '自定义边框'
                        buttonStyle = {{
                            borderRadius: 50,
                            borderColor: 'red',
                            borderWidth: 2,
                            width:100,
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}
                        onPress = {() => {
                        }}
                    />
                </View>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        图片样式：
                    </Text>
                    <Button
                        text = '图片背景'
                        backImgStyle = {{
                            width:150,
                            height:50,
                            justifyContent: 'center',
                            alignItems: 'center',
                            backgroundColor: 'transparent',
                        }}
                        backImg = {BtnBg}
                        onPress = {() => {
                        }}
                    />
                </View>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        纯图片样式：
                    </Text>
                    <Button
                        backImgStyle = {{
                            width:150,
                            height:50,
                            justifyContent: 'center',
                            alignItems: 'center',
                            backgroundColor: 'transparent',
                        }}
                        backImg = {BtnBg}
                        onPress = {() => {
                        }}
                    />
                </View>
            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    rowStyle:{
        paddingTop:10,
        paddingLeft:20,
        flexDirection: 'row',
        alignItems: 'center',
        width:'100%',
    },
    tagText:{
        marginRight:20,
        width:100,
    }
});

//make this component available to the app
export default ButtonDemo;