本文共 891 字，大约阅读时间需要 2 分钟。

项目上需要实现如下的效果，两个方式只能选择一种，选中一个另一个取消选中

然后翻了下RN的组件，并没有这个；最后只得自己写，先上最终效果图

好了，撸起袖子就是干！

第一步：根据点击事件，变换圆圈背景状态

1）制作空心圆圈

宽高一致，然后设置borderRadius为宽或高的一半，现在已经是一个圆了；然后，设置borderWidth和borderColor，控制边缘线的颜色和宽度；最后的代码如下

radius为圆圈的半径，可以自己指定；

2）如何通过点击，变换背景颜色

通过自定义属性checked来决定设不设置指定背景

在onPress里我们自定义了一个_pressed函数，用来接收父层级组件传递过来的回调函数

这里的id和onCheck都是自定义的属性，在父层级使用；每次点击，最后都会修改checked的值，之后会触发后父组件会重新render，由此会再触发我们自定义的checkbox重新render，然后，我们的checkbox就会变不同的背景

第二步：实现只能选中一个，彼此状态互斥

让我们先看看父组件中是如何使用这个checkbox的

这个CircleBox就是我们自定义的checkbox；有id，onCheck，radius, bgc, checked这五个属性，都可以通过props取到；

我们在父层级的component的构造方法中，声明了一个flag:1,两个circlebox的checked初始目标值分别为1和2，一般和该目标值分别和id一一对应；

最开始，第一个checkbox的checked值为true，默认选中状态；当我们点击了第二个checkbox的时候，从checkbox里我们拿到该id，通过回调函数传回父层级component，然后将flag修改为该id，即当前的flag变为2，那么checkbox重新render的时候，第一个checked状态变为false，第二个变为true；我们看到的就是，第一个被取消选中，第二个被选中；

部分代码如下：

子组件中：checkbox

父组件中：使用者

这样，我们就实现了自定义组件的互斥效果。

转载地址：http://rurni.baihongyu.com/