项目上需要实现如下的效果,两个方式只能选择一种,选中一个另一个取消选中
然后翻了下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
父组件中:使用者
这样,我们就实现了自定义组件的互斥效果。