import React from 'react' import PropTypes from 'prop-types' import Theme from '../local-theme/index' import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native' import select from './res/img/checkBox.png' import unselect from './res/img/unCheckBox.png' import Icon from '../Iconfont/Iconfont' export default class Checkbox extends React.Component { constructor(props) { super(props) this.state = { isChecked: props.checked, } } static propTypes = { checked: PropTypes.bool, isRight: PropTypes.bool, size: PropTypes.number, label: PropTypes.any, labelStyle: PropTypes.object, checkBoxColor: PropTypes.string, onChange: PropTypes.func, } static defaultProps = { checked: false, isRight: false, size: 25, checkBoxColor: Theme.baseMap.brandColor, onChange: () => {}, } componentWillReceiveProps = nextProps => { this.setState({ isChecked: nextProps.checked }) } checkboxOnpress() { this.setState({ isChecked: !this.state.isChecked }) this.props.onChange(!this.state.isChecked) } render() { let selectIcon = [ 'icon-icon-danxuankuang-xuanzhong', 'icon-icon-danxuankuang-weixuanzhong', ] if (this.props.shape == 'square') { selectIcon = ['icon-icon-Checkbox-i', 'icon-icon-Checkbox'] } return ( this.checkboxOnpress()} > {this.props.isRight ? ( typeof this.props.label == 'string' ? ( {this.props.label} ) : ( this.props.label ) ) : null} {this.state.isChecked ? ( // ) : ( // )} {this.props.isRight == false ? ( typeof this.props.label == 'string' ? ( {this.props.label} ) : ( this.props.label ) ) : null} ) } } const styles = StyleSheet.create({ container: { flexDirection: 'row', }, checkbox: { justifyContent: 'center', alignItems: 'center', alignSelf: 'center', }, text: { flex: 1, }, })