react native 验证码倒计时
2019-02-21 本文已影响0人
米开朗骑騾
效果图
屏幕快照 2019-02-21 下午5.18.37.png
屏幕快照 2019-02-21 下午5.18.45.png
1.使用
<Countdown
ref={r => this.countdown = r}
time={60}
onPress={this.handleClickCountdown}
onNetworkFailed={this.handleNetworkFailed}
>
{({status, time}) => {
let title, containerStyle, titleStyle
switch (status) {
case CountdownStatus.Idle:
title = '发送验证码'
containerStyle = [
styles.countdown,
hasText && {backgroundColor: '#3478F6', borderWidth: 0}
]
titleStyle = [
styles.countdownTitle,
hasText && {color: '#fff'}
]
break
case CountdownStatus.Counting:
title = `已发送${time}s`
containerStyle = styles.countdowndis
titleStyle = styles.countdownTitle
break
case CountdownStatus.Over:
title = '重新发送'
containerStyle = [
styles.countdown,
hasText && {backgroundColor: '#87B0FC', borderWidth: 0}
]
titleStyle = [
styles.countdownTitle,
hasText && {color: '#fff'}
]
break
}
return (
<View style={containerStyle}>
<Text style={titleStyle}>{title}</Text>
</View>
)
}}
const styles = StyleSheet.create({
countdown: {
height: sizeDp(30),
width: sizeDp(84),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#3478F6',
borderRadius: sizeDp(5),
},
countdowndis: {
height: sizeDp(30),
width: sizeDp(84),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#87B0FC',
borderRadius: sizeDp(5),
},
countdownTitle: {
color: '#FFFFFF',
fontSize: fontDp(13),
},
})
handleClickCountdown = () => {
if (this.state.mobileNo.length === 0) {
global.toast.alertWithType('warn', '温馨提示', '电话号码不能为空!');
return
} else if (!isMobile(this.state.mobileNo)) {
global.toast.alertWithType('warn', '温馨提示', '手机号输入有误，请重新输入!');
return
}
this.countdown && this.countdown.startCountdown()
this.props.verificationCodeRequest(this.state.mobileNo);//调用接口
};
handleNetworkFailed = () => {
global.toast.alertWithType('warn', '温馨提示', '网络错误!');
}
2.Countdown组件
"use strict";
/*
* A smart countdown component for react-native apps.
* You may use it to handle different status when request a verification code.
* https://github.com/ljunb/rn-countdown/
* Released under the MIT license
* Copyright (c) 2017 ljunb <cookiejlim@gmail.com>
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
}
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_native_1 = require("react-native");
var countdown_type_1 = require("./countdown.type");
var Countdown = /** @class */ (function (_super) {
__extends(Countdown, _super);
function Countdown(props) {
var _this = _super.call(this, props) || this;
_this.handleNetworkConnectivityChange = function (isConnected) { return _this.setState({ isConnected: isConnected }); };
_this.startCountdown = function () {
var onNetworkFailed = _this.props.onNetworkFailed;
var _a = _this.state, status = _a.status, isConnected = _a.isConnected;
if (status === countdown_type_1.CountdownStatus.Counting)
return;
if (isConnected) {
_this.setState({ status: countdown_type_1.CountdownStatus.Counting }, _this.startTimer);
}
else {
onNetworkFailed && onNetworkFailed();
}
};
_this.stopCountdown = function () {
var _a = _this.props, onDidFinishCountdown = _a.onDidFinishCountdown, time = _a.time;
onDidFinishCountdown && onDidFinishCountdown();
_this.setState({
status: countdown_type_1.CountdownStatus.Over,
second: time * 1000,
}, _this.clearTimer);
};
_this.handlePress = function () {
if (_this.isNetworkFailed)
return;
_this.props.onPress && _this.props.onPress();
};
_this.startTimer = function () {
_this.updateTargetTime();
var _a = _this.props, time = _a.time, onDidFinishCountdown = _a.onDidFinishCountdown;
_this.timer = setInterval(function () {
var tmpNow = new Date();
var second = _this.targetTime - tmpNow;
// countdown over
if (parseInt(second / 1000) <= 0) {
onDidFinishCountdown && onDidFinishCountdown();
_this.clearTimer();
_this.setState({ status: countdown_type_1.CountdownStatus.Over, second: time * 1000 });
return;
}
_this.setState({ second: second });
}, 1000);
};
_this.clearTimer = function () { return _this.timer && clearInterval(_this.timer); };
_this.updateTargetTime = function () {
var time = _this.props.time;
var currentTime = new Date();
_this.targetTime = new Date(currentTime.getTime() + (time + 1) * 1000);
};
var now = new Date();
_this.targetTime = new Date(now.getTime() + props.time * 1000);
_this.state = {
second: props.time * 1000,
status: countdown_type_1.CountdownStatus.Idle,
isConnected: true,
};
return _this;
}
Countdown.prototype.componentDidMount = function () {
react_native_1.NetInfo.isConnected.addEventListener('connectionChange', this.handleNetworkConnectivityChange);
};
Countdown.prototype.componentWillUnmount = function () {
this.clearTimer();
react_native_1.NetInfo.isConnected.removeEventListener('connectionChange', this.handleNetworkConnectivityChange);
};
Object.defineProperty(Countdown.prototype, "isNetworkFailed", {
get: function () {
var onNetworkFailed = this.props.onNetworkFailed;
var isConnected = this.state.isConnected;
// network is failed
if (!isConnected) {
onNetworkFailed && onNetworkFailed();
}
return !isConnected;
},
enumerable: true,
configurable: true
});
Countdown.prototype.render = function () {
var _a = this.state, status = _a.status, second = _a.second;
var _b = this.props, style = _b.style, activeOpacity = _b.activeOpacity, children = _b.children;
var isCounting = status === countdown_type_1.CountdownStatus.Counting;
var content = children({ status: status, time: parseInt(second / 1000) });
return (<react_native_1.TouchableOpacity disabled={isCounting} activeOpacity={activeOpacity} style={[style]} onPress={this.handlePress}>
{content}
</react_native_1.TouchableOpacity>);
};
Countdown.defaultProps = {
time: 30,
activeOpacity: 0.75
};
return Countdown;
}(React.Component));
exports.default = Countdown;
//# sourceMappingURL=countdown.js.map
3.手机号格式判断
export function isMobile(text) {
// 145/147/149 166
let strRegex = "^1(3|4|5|6|7|8|9)[0-9]{9}$";
let reg = new RegExp(strRegex);
return reg.test(text) && text.length === 11;
}
