[RN] React Native 获取验证码 按钮
React Native 获取验证码 按钮
效果如图:
实现方法:
一、获取验证码 按钮组件 封装
CountDownButton.js
"use strict"; import React from 'react';
import PropTypes from 'prop-types'; import {
View,
Text,
TouchableOpacity,
ViewPropTypes, StyleSheet
} from 'react-native'; const defaultShowText = '获取验证码';
export default class CountDownButton extends React.Component {
constructor(props) {
super(props);
this.state = {
timerCount: this.props.timerCount || ,
timerTitle: this.props.timerTitle || defaultShowText,
counting: false,
selfEnable: true,
};
this._shouldStartCount = this._shouldStartCount.bind(this);
this._countDownAction = this._countDownAction.bind(this);
} static propTypes = {
style: ViewPropTypes.style,
textStyle: Text.propTypes.style,
onClick: PropTypes.func,
disableColor: PropTypes.string,
timerTitle: PropTypes.string,
enable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
timerEnd: PropTypes.func,
timerActiveTitle: PropTypes.array,
executeFunc: PropTypes.func
}; _countDownAction() {
const codeTime = this.state.timerCount;
const {timerActiveTitle, timerTitle} = this.props;
const now = Date.now();
const overTimeStamp = now + codeTime * + ;
/*过期时间戳(毫秒) +100 毫秒容错*/
this.interval = setInterval(() => {
const nowStamp = Date.now();
if (nowStamp >= overTimeStamp) {
this.interval && clearInterval(this.interval);
this.setState({
timerCount: codeTime,
timerTitle: timerTitle || defaultShowText,
counting: false,
selfEnable: true
});
if (this.props.timerEnd) {
this.props.timerEnd()
}
} else {
const leftTime = parseInt((overTimeStamp - nowStamp) / , );
let activeTitle = `重新获取(${leftTime}s)`;
if (timerActiveTitle) {
if (timerActiveTitle.length > ) {
activeTitle = timerActiveTitle[] + leftTime + timerActiveTitle[]
} else if (timerActiveTitle.length > ) {
activeTitle = timerActiveTitle[] + leftTime
}
}
this.setState({
timerCount: leftTime,
timerTitle: activeTitle,
})
}
}, )
} _shouldStartCount(shouldStart) {
if (this.state.counting) {
return
}
if (shouldStart) {
this._countDownAction();
this.setState({counting: true, selfEnable: false})
} else {
this.setState({selfEnable: true})
}
} componentDidMount() {
const {executeFunc} = this.props;
executeFunc && executeFunc(this._shouldStartCount);
} componentWillUnmount() {
clearInterval(this.interval)
} render() {
const {onClick, style, textStyle, enable, disableColor} = this.props;
const {counting, timerTitle, selfEnable} = this.state;
return (
<View style={[{width: , height: }, style]}>
<TouchableOpacity
activeOpacity={counting ? : 0.8}
onPress={() => {
if (!counting && enable && selfEnable) { this.setState({selfEnable: false});
onClick(this._shouldStartCount)
}
}}
style={[styles.container,
{backgroundColor: ((!counting && enable && selfEnable) ? 'red' : disableColor || '#ccc')}
]}
>
<Text
style={[
styles.defaultText,
textStyle,
]}>{timerTitle}</Text>
</TouchableOpacity>
</View>
)
}
} const styles = StyleSheet.create({
container: {
flex: ,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 0.5,
borderRadius: ,
borderColor: "white",
},
defaultText: {
fontSize: ,
color: "white",
}
});
使用:
import React, {Component} from "react";
import {StyleSheet, View,} from 'react-native';
import CountDownButton from './CountDownButton'; export default class TestButton extends Component {
constructor(props) {
super(props);
this.state = {}
} render() { return (
<View style={{flex: }}> <CountDownButton enable={true}
timerCount={}
onClick={(_shouldStartCount) => {
_shouldStartCount(true)
}}/> </View>
); }
}
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/11031600.html
转载请著名出处!谢谢~~
[RN] React Native 获取验证码 按钮的更多相关文章
- [RN] React Native 获取地理位置
React Native 获取地理位置 实现原理: 1.用 navigator.geolocation.getCurrentPosition 获取到坐标信息 2.调用 高德地图 接口,解析位置数据 ...
- [RN] React Native 幻灯片效果 Banner
[RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...
- [RN] React Native 实现 类似QQ 登陆页面
[RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...
- iOS “获取验证码”按钮的倒计时功能
iOS 的倒计时有多种实现细节,Cocoa Touch 为我们提供了 NSTimer 类和 GCD 的dispatch_source_set_timer方法去更加方便的使用计时器.我们也可以很容易的的 ...
- [RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
- [RN] React Native 常见基本问题归纳总结
[RN] React Native 常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...
- [RN] React Native 关闭所有黄色警告
[RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- [RN] React Native 常用命令行
[RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...
随机推荐
- 《Interest Rate Risk Modeling》阅读笔记——第五章:久期向量模型
目录 第五章:久期向量模型 思维导图 久期向量的推导 久期向量 广义久期向量 一些想法 第五章:久期向量模型 思维导图 久期向量的推导 \[ V_0 = \sum_{t=t_1}^{t_n} CF_t ...
- jquery取消绑定的方法
jquery取消绑定的方法 一般用变量控制 不要用unbind() 相应比较慢 <pre> $('.choseitem').on('click', function () { //如果设置 ...
- PHP的小技巧
PHP的小技巧fdd()[0]函数后面可以直接加数组索引 这样可以省内存占用啦 代码也更简洁
- linux下发布项目
查看端口
- Web应急:门罗币恶意挖矿
门罗币(Monero 或 XMR),它是一个非常注重于隐私.匿名性和不可跟踪的加密数字货币.只需在网页中配置好js脚本,打开网页就可以挖矿,是一种非常简单的挖矿方式,而通过这种恶意挖矿获取数字货币是黑 ...
- Java se课程设计详解——数据库接口类(1)
开始做课程设计的时候根本无从下手,后来查阅资料后发现是先从数据库开始的.整个课程设计需要用到的如下图,今天总结一下数据库接口! 数据库接口需要用到两个类,一个是DAO.java,另一个是propert ...
- 基于串口的SD_card系统
概述 基于串口的SD_card系统1, 扫描文件:2, 新建文件:3, 删除文件:4, 写入文件:5, 读取文件. 整个文件系统的串口通信方式都是ASC通信方式. 文件系统分为简单实用方式和专业使用方 ...
- .NET Core的依赖注入
转自[大内老A] 依赖注入[1]: 控制反转依赖注入[2]: 基于IoC的设计模式依赖注入[3]: 依赖注入模式依赖注入[4]: 创建一个简易版的DI框架[上篇]依赖注入[5]: 创建一个简易版的DI ...
- [干货]kubenertes ingress负载grpc
目录 概述 搭建 生成公私钥 创建secret 创建ingress 访问 概述 一般情况下,我们的系统对外暴露HTTP/HTTPS的接口,内部使用rpc(GRPC)通讯,这时GRPC在服务之间通过se ...
- 【selenium】基于python语言,如何用select选择下拉框
在项目测试中遇到了下拉框选择的控件,来总结下如何使用select选择下拉框: 下图是Select类的初始化描述,意思是,给定元素是得是select类型,不是就抛异常.接下来给了例子:要操作这个sele ...