rn-project/src/components/radio.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

'use strict';

import React, { Component } from 'react';
import {
  View,
  Text,
  //  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';

/**
 * 使用方法
 * 
 * 
   <Radio
            checked={this.state.checked}
            color={"#31bcfe"}
            size={20}
            onPress={() => {
              this.setState({
                checked: !this.state.checked
              })
            }}
          />

 */

export default class Radio extends Component {
  static defaultProps = {
    // radioStyle: '', //单元框样式
    size: 30,
    color: '#ffb910',
    checked: true,
  };
  static propTypes = {
    checked: PropTypes.bool, //是否选中
    size: PropTypes.object, // 单选框的大小
    color: PropTypes.object, // 单选框的背景色
    onPress: PropTypes.func,
    // radioStyle: PropTypes.object, // 单选的样式
  };

  constructor(props) {
    super(props);
  }

  render() {
    const { checked, radioStyle, size, color, onPress } = this.props;
    const propsStyleView = { height: size * 0.92, width: size * 0.92 };
    const propsStyle = { fontFamily: 'iconfont', fontSize: size, color: color };
    const noCheckStyle = {
      borderRadius: (size * 0.92) / 2,
      borderWidth: 1,
      borderColor: color,
    };
    return (
      <View>
        {checked ? (
          <TouchableOpacity onPress={onPress}>
            <Text style={[propsStyle]}>&#xe672;</Text>
          </TouchableOpacity>
        ) : (
          <TouchableOpacity
            style={[propsStyleView, noCheckStyle]}
            onPress={onPress}
          />
        )}
      </View>
    );
  }
}

// const styles = StyleSheet.create({
//   radioLightStyle: {
//     color: '#ffb910',
//     fontFamily: 'iconfont',
//     fontSize: 30,
//   },

//   noradioStyle: {
//     width: 30,
//     height: 30,
//     borderRadius: 15,
//     borderWidth: 1,
//     borderColor: '#ffb910',
//   },
// });