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

2024-05-24 05:51:31

一、场景

首先，要实现的目标是：
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

react native 的button点击变色以及禁用问题相关推荐

button点击变色，文字变色
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="ht ...
大咖说：React Native 全埋点实现原理（内附赠书）
本文主要介绍如何实现 React Native 的全埋点,主要是控件点击 $AppClick 事件.该内容,会默认你有一定的 React Native 开发经验,(若没有,也可参与文末赠书). ■ 作 ...
react native native module
React Native Native Modules,官方地址:https://facebook.github.io/react-native/docs/native-modules-android ...
android input 点击事件失效,React Native：TextInput元素上的onContentSizeChange事件在Android上不起作用...
我在Android设备上的TextInput事件'onContentSizeChange'出现问题. 实际上,当我输入消息直到行尾并且文本进入下一行时,TextInput的高度不会更新.React N ...
【React Native】iOS原生导航跳转RN页面
上一篇介绍了React Native使用react-navigation进行导航跳转页面,现在我们介绍下原生iOS中怎么导航进一个新的React Native页面. 一.原生跳转React Nativ ...
【React Native】react-navigation导航使用方法
目录集成react-navigation 使用react-navigation 上一篇介绍了如何在已有iOS项目中集成React Native.这一篇我们把上一篇的demo做下拓展,添加点击电影跳转 ...
给iOS开发者的React Native入门使用教程
目录一. 原生iOS项目集成React Native 二. 原生跳转RN页面三. 显示豆瓣热门电影列表四. 改为导航五.完整源代码一. 原生iOS项目集成React Native 创建一个新 ...
React Native 与嵌入Android原生与Activity页面互相跳转
前言 RN作为混合开发,肯定需要与原生直接的页面跳转,这里也属于和原生端通信的知识模块.我们知道Android的页面跳转是通过Intent.Rn是通过路由,而两者直接页面互相跳转就需要原生借助JS暴露 ...
React Native基础入门教程：初步使用Flexbox布局
一.长度的单位在开始任何布局之前,让我们来首先需要知道,在写React Native组件样式时,长度的不带单位的,它表示"与设备像素密度无关的逻辑像素点". 这个怎么理解呢? 我 ...

最新文章

热门文章