react native 的button点击变色以及禁用问题

  • Post author:
  • Post category:其他


一、场景

首先,要实现的目标是:

1、点击button,改变button按钮的颜色,并且保持变色状态

2、点击button之后,无法再重复点击

二、实现方法

1、既然是要改变button的颜色,那一定要有样式。我们需要在原有样式的基础上,增加一个变量’kai’,它的值只能为true或者false,方便我们进行三元运算,实现改变背景色的目的

这里写图片描述

2、具体怎么在原有的样式基础上实现变色呢,请看下面的:

这里写图片描述

解释:首先是view中已经有样式了,我们需要在原有的样式中加上背景色。就像图中的这种样式,用‘,’隔开即可,然后就是判断变量’kai’的值。是true的话,就显示红色,不是true的话,就没有背景色。

3、接下来就是button处的写法

这里写图片描述

解释:

(1)Button的禁用属性是disabled属性,如果disabled=true的话,就会禁用按钮。如果是false的话,按钮就能正常点击。

(2)由于我们设置变量’kai’的初始值是false,因此,刚开始是可以点击按钮的。等点击之后,我们改变’kai’,把它变成true,就能实现禁用按钮的目的

(3)onPress是我们点击之后要进行的逻辑操作,括号里面是我们要传给服务器的值,暂且不理它

4、点击按钮,执行changeOpen()方法,如下:

这里写图片描述

解释:

(1)我们这边只需要把‘kai’的原始值改变成相反的即可

(2)console.log是为了查看有没有执行这个方法

5、实现效果:

这里写图片描述

这里写图片描述

这样就OK了,点击之后变成红色,并且不能重复点击

以上就是要实现的效果。中间可以考虑加上弹框之类的。这个方法可能比较笨,不过也算是达到了目的。

end



版权声明:本文为LJFPHP原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。