hcmobile-sdk/components/selectButton/SelectButtonDemo.js

mobile-sdk

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    Image,
    Button,
} from 'react-native';
import SelectButton from './SelectButton';
import checkedIcon from '../../images/btn_checkbox_true.png';
import uncheckedIcon from '../../images/btn_checkbox_false.png';
import checkedIcon2 from '../../images/btn_checkbox_true_2.png';
import uncheckedIcon2 from '../../images/btn_checkbox_false_2.png';
import checkedIcon3 from '../../images/btn_radio_true.png';
import uncheckedIcon3 from '../../images/btn_radio_false.png';
import RadioGroup from './RadioGroup';

const {width,} = Dimensions.get('window');
export default class SelectButtonDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.checkbox}>
                    <Text style={styles.title}>多选按钮,最简单的默认样式</Text>
                    <View style={styles.viewgroup}>
                        <SelectButton
                            keyValue="Eg.1"
                            leftText="基本示例"
                            onClick={(key) => {
                                console.log('select ' + key);
                            }}/>
                        <SelectButton
                            checkedColor='lightskyblue'
                            unCheckedColor='lightseagreen'
                            keyValue="Eg.2"
                            rightText="自定义颜色示例"
                            onClick={(key) => {
                                console.log('select ' + key);
                            }}/>
                    </View>
                    <Text style={styles.title}>多选按钮,带图片的样式</Text>
                    <View style={{width: width, flexDirection: 'row', justifyContent: 'space-around'}}>
                        <SelectButton
                            keyValue="Eg.3"
                            leftTextStyle={{color: 'lightblue', fontSize: 16}}
                            leftText="左侧文字"
                            checkedImage={<Image source={checkedIcon} style={{width: 15, height: 15,}}
                                resizeMode='contain'/>}
                            unCheckedImage={<Image source={uncheckedIcon} style={{width: 15, height: 15}}
                                resizeMode='contain'/>}
                            onClick={(key) => {
                                console.log('select ' + key);
                            }}/>
                        <SelectButton
                            keyValue="Eg.4"
                            rightText="右侧文字"
                            defaultChecked={true}
                            checkedImage={<Image source={checkedIcon2} style={{width: 15, height: 15,}}
                                resizeMode='contain'/>}
                            unCheckedImage={<Image source={uncheckedIcon2} style={{width: 15, height: 15}}
                                resizeMode='contain'/>}
                            onClick={(key) => {
                                console.log('select ' + key);
                            }}/>
                    </View>

                </View>

                <View style={styles.radioButton}>
                    <Text style={styles.title}>单选按钮,最简单的默认样式</Text>
                    <RadioGroup
                        style={styles.viewgroup}
                        onChanged={(key) => {
                            console.log('select ' + key);
                        }}>
                        <SelectButton
                            keyValue="Eg.1"
                            leftText="基本示例"/>
                        <SelectButton
                            keyValue="Eg.2"
                            leftText="基本示例"/>
                        <SelectButton
                            keyValue="Eg.3"
                            leftText="基本示例"/>
                    </RadioGroup>

                    <Text style={styles.title}>单选按钮,样式的配置与多选按钮一样</Text>
                    <RadioGroup
                        ref={(c)=>{this.radioGroup=c;}}
                        style={styles.viewgroup}
                        defaultChecked="Eg.3"
                        onChanged={(key) => {
                            console.log('select ' + key);
                        }}>
                        <SelectButton
                            keyValue="Eg.1"
                            leftText="基本示例"
                            checkedImage={<Image source={checkedIcon3} style={{width: 15, height: 15,}}
                                resizeMode='contain'/>}
                            unCheckedImage={<Image source={uncheckedIcon3} style={{width: 15, height: 15}}
                                resizeMode='contain'/>}/>
                        <SelectButton
                            keyValue="Eg.2"
                            leftText="基本示例"
                            checkedImage={<Image source={checkedIcon3} style={{width: 15, height: 15,}}
                                resizeMode='contain'/>}
                            unCheckedImage={<Image source={uncheckedIcon3} style={{width: 15, height: 15}}
                                resizeMode='contain'/>}/>
                        <SelectButton
                            keyValue="Eg.3"
                            leftText="基本示例"
                            checkedImage={<Image source={checkedIcon3} style={{width: 15, height: 15,}}
                                resizeMode='contain'/>}
                            unCheckedImage={<Image source={uncheckedIcon3} style={{width: 15, height: 15}}
                                resizeMode='contain'/>}/>
                    </RadioGroup>

                    <View style={{alignSelf: 'center'}}>
                        <Button title='重置' onPress={() => {
                            this.radioGroup.clearState();
                        }}/>
                    </View>
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    title: {
        marginTop: 10,
        padding: 10,
    },
    checkbox: {
        width: width,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        backgroundColor: 'whitesmoke',
        padding: 5,
    },
    radioButton: {
        flex: 1,
        width: width,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        backgroundColor: 'aliceblue'
    },
    viewgroup: {
        width: width,
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
});