React Native Verification Code countdown tool class sharing, reactnative

Source: Internet
Author: User

React Native Verification Code countdown tool class sharing, reactnative

The example in this article shares the code of the React Native Verification Code countdown tool for your reference. The details are as follows:

Because the timer was used directly in the past, when the current calculation was not performed, the timer never went away every time the program exited. This tool class simply solved the bug that the program exited the background and the timer did not go, go directly to the code ~~

/*** Created by zhuang. haipeng on 2017.9.11 ** ad countdown, verification code countdown tool ** usage: // 60*1000 is 60 seconds, 60*60*100 is 60 minutes... * let countdownDate = new Date (). getTime () + 60*1000) * CountdownUtil. settimer (countdownDate, (time) => {* Console. log (time) --> {years: 0, days: 0, hours: 0, min: 0, sec: 49, millisec: 0} ** remember: call CountdownUtil when exiting the application tool page. stop () clears the timer to avoid Memory explosion */export default class CountdownUtil {/** timer */interval = null; /*** create timer **/static settimer (countdownDate, callbak) {this. interval = setInterval () => {let time = this. getDateData (countdownDate) callbak & callbak (time)}, 1000)}/*** timed computing --> This method can solve the problem of application exit from the background, the timer does not go * @ param countdownDate * @ return {*} */static getDateData (countdownDate) {let diff = (Date. parse (new Date (countdownDate)-Date. parse (new Date)/1000; if (diff <= 0) {this. stop () // when the countdown is 0, clear the return 0;} const timeLeft = {years: 0, days: 0, hours: 0, min: 0, sec: 0, millisec: 0,}; if (diff >=( 365.25*86400) {timeLeft. years = Math. floor (diff/(365.25*86400); diff-= timeLeft. years * 365.25*86400;} if (diff> = 86400) {timeLeft. days = Math. floor (diff/86400); diff-= timeLeft. days * 86400;} if (diff >=3600) {timeLeft. hours = Math. floor (diff/3600); diff-= timeLeft. hours * 3600;} if (diff> = 60) {timeLeft. min = Math. floor (diff/60); diff-= timeLeft. min * 60;} timeLeft. sec = diff; return timeLeft;}/*** add zero number --> example: 00: 01 minutes 59 seconds * @ param num * @ param length * @ return {*} */static leadingZeros (num, length = null) {let length _ = length; let num _ = num; if (length _ = null) {length _ = 2;} num _ = String (num _); while (num _. length <length _) {num _ = '0' + num _;} return num _;}/** clear timer */static stop () {clearInterval (this. interval );}};

Callback is used to pass the time countdown of the conversion. You can print the time object that callbak returns.

Here we will take the verification code countdown as an example:

Ideas:

1. Set the state machine isSentVerify to true by default to send verification codes.
2. Click it and set the state machine isSentVerify to false again, so that users are not allowed to click again to send network requests.
3. Declare the countdown time (the time can only be declared when you click here. If you click componentDidMount again, the timer starts as soon as you enter)
4. Set the countdown after the request is successful. If time. sec is greater than 0, set the time; otherwise, set the text to "reacquire"
5. Check whether the text is "reacquire" and set the state machine isSentVerify to true. After the countdown, you can send the verification code again.
6. When a network request fails, set isSentVerify to true in the catch, so that the user can obtain the verification code again.

If (this. state. isSentVerify = true) {// countdown time let countdownDate = new Date (). getTime () + 60*1000) // after clicking the verification code, the network request cannot be sent this. setState ({isSentVerify: false}); Api. userRegisterCheckCode (this. state. phoneText ). then (data) =>{// countdown time CountdownUtil. settimer (countdownDate, (time) => {this. setState ({timerTitle: time. sec> 0? Time. sec +'s ': 'reget'}, () => {if (this. state. timerTitle = "get again") {this. setState ({isSentVerify: true })}})})}). catch (err) => {this. setState ({isSentVerify: true ,})});}

When you exit the page, remember to destroy the timer.

 componentWillUnmount() {    CountdownUtil.stop()  }

:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.