react-native Radio 单选组件(可扩展)

原理

找了两个还行的图片ICON ，底色相反的。通过色差来达到是否选中的目的
想要扩展的话，去图标库找类似的图片在render中再添加对应的映射就好了

代码

import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import AntIcon from 'react-native-vector-icons/AntDesign';
// 安利一个宝藏图标库，贼好用 react-native-vector-icons
// 地址 https://oblador.github.io/react-native-vector-icons/
/**
 * @param selected  选中状态       false
 * @param color     背景色         '#096DD9'
 * @param style     整体样式       {}
 * @param onChange  选中事件回调    fun 
 * @param size      图标大小       14
 * @param type      图标类型       'circle'
 */

export default class AntIconRadio extends Component {

    render() {
        const { selected = false, color = '#096DD9', style, onChange, size = 14,type = 'circle' } = this.props
        return (
            <TouchableOpacity style={{ ...style }} onPress={onChange}>
               {type === 'circle' && <AntIcon name={selected ? 'checkcircle' : 'checkcircleo'} color={color} size={size} />} 
               {type === 'square' && <AntIcon name={selected ? 'checksquare' : 'checksquareo'} color={color} size={size} />} 
            </TouchableOpacity>
        );
    }
}

效果