BooleanCheckView.js 2.45 KB
import React, {Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    Image,
} from 'react-native';

const checkedImg = require("../img/switch_on.png");
const unCheckedImg = require("../img/switch_off.png");

const HPading = (16);

export default class BooleanCheckView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            checked: true
        }
        this.attrData = this.props.attrData;

        this.extendData = JSON.parse(this.attrData.data);// null=无|true=是|false=否
    }

    componentWillMount() {
        if (this.attrData.value) {
            let checkedVaule = this.attrData.value || this.attrData.value === 'true';
            this.setState({
                checked: checkedVaule
            })
        } else {
            this.setState({
                checked: this.extendData.booleanDefault
            });
        }

        this.attrData.value = this.extendData.booleanDefault;
    }

    render() {
        let {name, code, type, description, isRequired, isPreview} = this.attrData;

        return (
            <View style={{flexDirection: 'row', width: '100%', height: 46, backgroundColor: 'white', alignItems: 'center', paddingHorizontal: HPading}}>
                <View style={{flex: 1, flexDirection: 'row',justifyContent:'flex-start',alignItems:'center'}}>
                    {isRequired&&<Text style={{ color: "#FF3030" }}>* {" "}</Text>}
                    {!isRequired&&<Text style={{ color: "#fff" }}>* {" "}</Text>}
                    <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>{name||""}</Text>
                </View>
                <TouchableOpacity
                    style={{justifyContent: 'flex-end', alignItems: 'center'}}
                    activeOpacity={0.8}
                    onPress={()=>{
                        let _checked = !this.state.checked;
                        this.setState({
                            checked: _checked
                        });
                        this.attrData.value = _checked;
                    }}
                >
                    <Image
                        style={{
                            width: 46,
                            height: 26,
                        }}
                        source={this.state.checked ? checkedImg : unCheckedImg}
                        resizeMode={'contain'}
                    />
                </TouchableOpacity>
            </View>
        );
    }
}