react native 验证码倒计时

效果图

屏幕快照 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;
}