React Native Verification Code countdown tool class sharing, reactnative

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.