ReactNative验证码倒计时分享

本文实例为大家分享了React Native验证码倒计时工具类的具体代码，供大家参考，具体内容如下

因为以前直接用定时器，没去计算当前的时候，每次退出程序的时候，定时器一直不走，这个工具类简单的解决程序退出后台，定时器不走的bug，那么，直接上代码咯~~

利用callback将转换的时间倒计时传递出去， 您可以打印一下callbak回去的time对象

这里简单以验证码倒计时为例：

思路：

1. 先设置状态机isSentVerify默认true可以发送验证码
2. 点击之后就重新设置状态机isSentVerify为false, 不让用户再次点击发送网络请求
3. 声明倒计时的时间（这里只能在你点击的时候才能声明，如果再componentDidMount中，会一进入就开始计时的）
4. 请求成功后设置倒计时，判断如果time.sec > 0 的时候，则设置时间，否则将文字设置为为“重新获取”
5. 然后判断文字为“重新获取”， 然后将状态机isSentVerify设为true， 这样用户倒计时结束后，可以再次发送验证码。
6. 网络请求失败的时候，在catch处将isSentVerify设置为true，这样用户可以再次获取验证码

退出页面的时候，记得销毁定时器

效果图：

相关推荐：

手机注册时发送验证码倒计时功能

微信小程序中获取验证码倒计时60s的实例分析

js获取验证码倒计时的实现方法

以上就是React Native验证码倒计时分享的详细内容，更多请关注Gxl网其它相关文章！