React-Native中使用验证码倒计时的按钮实例代码

开发过程中有获取手机验证码的场景,这时候有这样的要求:

1,点击“获取验证码”的按钮,发起获取验证码的网络请求,同时按钮置为不可用

2,如果网络请求成功,按钮继续不可用,但按钮上文本改为倒计时((*s)后重新获取)

3,如果网络请求失败,按钮置为可用

4,倒计时结束,按钮可用

直接上代码

源码

import React,{PropTypes} from 'react';
import {View,Text,TouchableOpacity} from 'react-native';
export default class TimerButton extends React.Component {
  constructor(props) {
   super(props)
    this.state = {
      timerCount: this.props.timerCount || 90,
      timerTitle: this.props.timerTitle || '获取验证码',
      counting: false,
      selfEnable: true,
    };
    this._shouldStartCountting = this._shouldStartCountting.bind(this)
    this._countDownAction = this._countDownAction.bind(this)
  }
  static propTypes = {
   style: PropTypes.object,
   textStyle: Text.propTypes.style,
   onClick: PropTypes.func,
   disableColor: PropTypes.string,
   timerTitle: PropTypes.string,
   enable: React.PropTypes.oneOfType([React.PropTypes.bool,React.PropTypes.number])
  };

  _countDownAction(){
    const codeTime = this.state.timerCount;
    this.interval = setInterval(() =>{
      const timer = this.state.timerCount - 1
      if(timer===0){
        this.interval&&clearInterval(this.interval);
        this.setState({
          timerCount: codeTime,
          timerTitle: this.props.timerTitle || '获取验证码',
          counting: false,
          selfEnable: true
        })
      }else{
        console.log("---- timer ",timer);
        this.setState({
          timerCount:timer,
          timerTitle: `重新获取(${timer}s)`,
        })
      }
    },1000)
  }
  _shouldStartCountting(shouldStart){
    if (this.state.counting) {return}
    if (shouldStart) {
      this._countDownAction()
      this.setState({counting: true,selfEnable:false})
    }else{
      this.setState({selfEnable:true})
    }
  }
  componentWillUnmount(){
    clearInterval(this.interval)
  }
  render(){
    const {onClick,style,textStyle,enable,disableColor} = this.props
    const {counting,timerTitle,selfEnable} = this.state
    return (
      <TouchableOpacity activeOpacity={counting ? 1 : 0.8} onPress={()=>{
        if (!counting && enable && selfEnable) {
          this.setState({selfEnable:false})
          this.props.onClick(this._shouldStartCountting)
        };
      }}>
        <View style={[{width:100, height:44,flex:1,justifyContent:'center',alignItems:'center'},style]}>
          <Text style={[{fontSize: 16},textStyle,{color: ((!counting && enable && selfEnable) ? textStyle.color : disableColor || 'gray')}]}>{timerTitle}</Text>
        </View>
      </TouchableOpacity>
    )
  }
}

使用

<TimerButton enable={phoneNumber.length}
  style={{width: 110,marginRight: 10}}
  textStyle={{color: StaticColor.COLOR_MAIN}}
  timerCount={10}
  onClick={(shouldStartCountting)=>{
    this._requestSMSCode(shouldStartCountting)
  }}/>
  • onClick:触发后按钮selfEnable会立即被置为false
  • 通过onClick中的一系列逻辑处理之后需要调用回调函数结束倒计时
  • shouldStartCountting:回调函数,接受一个Bool类型的参数
    • shouldStartCountting(true),开始倒计时,倒计时结束时自动恢复初始状态
    • shouldStartCountting(false), 按钮的selfEnable会立即被置为true

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • ReactNative短信验证码倒计时控件的实现代码

    由于最近刚开始认真的搞RN,可能有一些封装的不是最佳实践,还是希望大家多提意见,和大家一起进步吧.本文介绍了ReactNative短信验证码倒计时控件,分享给大家 功能 根据项目的需要,需要写一个自定义的控件,实现如下功能: 默认文字为点击获取验证码 点击后出现60秒的倒计时 颜色,字号可调 倒计时过程中,再次点击需要忽略掉 倒计时完成后文本恢复成点击获取验证码 再几次点击同之前 其实说了这么多,就是个最普通的验证码的功能... 效果 效果图如下:(录的图片比较一般,对付着看吧) 实现原理 自己

  • react native中的聊天气泡及timer封装成的发送验证码倒计时

    其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可以用callBack  二可以用pubsub发布订阅模式 三可以用manager事件监听(a页面要显示的内容 有两种形式,一是从manager主动接收,也就是说不需要点击什么的获取数据,而是时时监听manager里数据的变化,第二种a页面获取要显示内容的形式是 点击出发,获取) 3 需要说的还是na

  • React Native验证码倒计时工具类分享

    本文实例为大家分享了React Native验证码倒计时工具类的具体代码,供大家参考,具体内容如下 因为以前直接用定时器,没去计算当前的时候,每次退出程序的时候,定时器一直不走,这个工具类简单的解决程序退出后台,定时器不走的bug,那么,直接上代码咯~~ /** * Created by zhuang.haipeng on 2017.9.11 * * 广告倒计时,验证码倒计时工具类 * * 用法: //60 * 1000 为60秒 , 60 * 60 * 100 为60分钟 ... * let

  • React-Native中使用验证码倒计时的按钮实例代码

    开发过程中有获取手机验证码的场景,这时候有这样的要求: 1,点击"获取验证码"的按钮,发起获取验证码的网络请求,同时按钮置为不可用 2,如果网络请求成功,按钮继续不可用,但按钮上文本改为倒计时((*s)后重新获取) 3,如果网络请求失败,按钮置为可用 4,倒计时结束,按钮可用 直接上代码 源码 import React,{PropTypes} from 'react'; import {View,Text,TouchableOpacity} from 'react-native'; e

  • React Native仿美团下拉菜单的实例代码

    本文介绍了React Native仿美团下拉菜单的实例代码,最近也在学习React Native,顺便分享给大家 在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可.如果使用React Native开发上面的效果,需要注意几个问题: 1. 在下拉的时候有动画过度效果: 2.下拉菜单出现后点击菜单项,菜单项可选择,并触发对应的事件: 3.下拉菜单中的项目可以配置: 要实现弹框效果,我们马上回想到使用Mo

  • React Native 中实现倒计时功能

    目录 正文 首次实现 最终实现 示例 正文 在 React Native,该如何实现一个倒计时功能呢? 首次实现 表面看来很简单,譬如像下面这样: const timer = useRef<ReturnType<typeof setInterval> | null>(null) const [count, setCount] = useState(0) const start = () => { setCount(10) timer.current = setInterval

  • React Native中Android物理back键按两次返回键即退出应用

    前言 本文主要给大家介绍了关于React Native中Android物理back键按两次返回键就会退出应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 话不多说,直接上图: 测试代码 第16~22行 设置事件监听以及移除事件监听. componentWillMount(){ BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid); } componentWillUnmount()

  • React Native中Navigator的使用方法示例

    前言 众所周知在React Native中如何实现页面的跳转,这是一个突破点也是一个难点,想让我们的页面切换起来动起来应该是每一个初学者所追求的,那么在RN中实现这样的功能那必须要了解Navigator的用法了.Navigator是React Native自带的组件,不需要导入第三方组件,下面就来具体说明如何使用. 方法如下 首先,我们最好不要把index.ios.js和index.android.js文件写的很冗余很多代码,可以仅仅将其当做是一个工程的入口,好,废话不多说,开始上代码. 1.习

  • React Native中的RefreshContorl下拉刷新使用

    我们知道App中都有下拉加载,在React Native中也有类似的控件 一.属性方法 (1) onRefresh function 在视图开始刷新的时候调用 (2) refreshing bool 视图是否在刷新时显示指示器,也表明当前是否在刷新中 (3) colors [ColorPropType] android平台适用 进行设置加载进去指示器的颜色,至少设置一种,最多可以设置4种 (4) enabled bool android平台适用 用来设置下拉刷新功能是否可用 (5) progre

  • React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法.分享给大家供大家参考,具体如下: 1.Scroll View ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下: 滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量. horizontal={bool},属性为true时,所有子视图在水平方向排列,否则在纵向排列.默认为

  • React Native中实现动态导入的示例代码

    目录 背景 多业务包 动态导入 Metro 打包原理 打包过程 bundle 分析 __d函数 __r函数 方案设计 分 识别入口 树拆分 bundle 生成 合 总结 背景 随着业务的发展,每一个 React Native 应用的代码数量都在不断增加,bundle 体积不断膨胀,对应用性能的负面影响愈发明显.虽然我们可以通过 React Native 官方工具 Metro 进行拆包处理,拆分为一个基础包和一个业务包进行一定程度上的优化,但对日益增长的业务代码也无能为力,我们迫切地需要一套方案来

  • React Native 中添加自定义字体的方法

    目录 添加字体 定义 assets 目录 执行 link 命令 在样式中使用字体 示例 在 React Native 中,如何添加自定义字体呢?React Native 提供了便捷的命令行工具来帮助我们. 添加字体 在项目根目录下创建 assets/fonts 文件夹,把字体文件放到这个文件夹下. 如图: 定义 assets 目录 在项目根目录下创建 react-native.config.js 文件,编辑其中内容,留意第 6 行,这和我们自定义字体文件所在目录一致. module.export

随机推荐