原理
找了两个还行的图片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>
);
}
}