国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 編程 > JavaScript > 正文

ReactNative短信驗(yàn)證碼倒計(jì)時(shí)控件的實(shí)現(xiàn)代碼

2019-11-19 16:02:12
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

由于最近剛開(kāi)始認(rèn)真的搞RN,可能有一些封裝的不是最佳實(shí)踐,還是希望大家多提意見(jiàn),和大家一起進(jìn)步吧。本文介紹了ReactNative短信驗(yàn)證碼倒計(jì)時(shí)控件,分享給大家

功能

根據(jù)項(xiàng)目的需要,需要寫(xiě)一個(gè)自定義的控件,實(shí)現(xiàn)如下功能:

  1. 默認(rèn)文字為點(diǎn)擊獲取驗(yàn)證碼
  2. 點(diǎn)擊后出現(xiàn)60秒的倒計(jì)時(shí)
  3. 顏色,字號(hào)可調(diào)
  4. 倒計(jì)時(shí)過(guò)程中,再次點(diǎn)擊需要忽略掉
  5. 倒計(jì)時(shí)完成后文本恢復(fù)成點(diǎn)擊獲取驗(yàn)證碼
  6. 再幾次點(diǎn)擊同之前

其實(shí)說(shuō)了這么多,就是個(gè)最普通的驗(yàn)證碼的功能。。。

效果

效果圖如下:(錄的圖片比較一般,對(duì)付著看吧)

實(shí)現(xiàn)原理

自己封裝了個(gè)控件,它內(nèi)部含有一個(gè)Text控件,然后我們又寫(xiě)了一個(gè)timer,然后負(fù)責(zé)倒計(jì)時(shí),然后每次都需要判斷一下是否繼續(xù),然后加了一個(gè)flag字段,判斷是否接受下次點(diǎn)擊事件,當(dāng)?shù)褂?jì)時(shí)結(jié)束之后還需要將初始狀態(tài)重置回去即可。

代碼

控件代碼

import React, {Component } from 'react';import {  StyleSheet,  Text,  View,  Image,  TextInput,  TouchableHighlight,  StatusBar,  Alert,  AppRegistry} from 'react-native';import LinkRow from '../components/LinkRow';import cStyles from '../styles/CommonStyle';import axios from 'axios';class MyCountTime extends Component {  constructor(props) {    super(props);    let timeLeft = this.props.timeLeft > 0 ? this.props.timeLeft : 5;    let width = this.props.width || 100;    let height = this.props.height || 50;    let color = this.props.color || '#42A5F5';    let fontSize = this.props.fontSize || 30;    let fontWeight = this.props.fontWeight || '600';    let borderColor = this.props.borderColor || '#42A5F5';    let borderWidth = this.props.borderWidth || 1;    let borderRadius = this.props.borderRadius || 4;    let backgroundColor = this.props.backgroundColor || '#42A5F5';    let begin = 0;    let press = this.props.press;    this.afterEnd = this.props.afterEnd || this._afterEnd;    this.style = this.props.style;    this.state = {      timeLeft: timeLeft,      begin: begin    };    this.countTextStyle = {      textAlign: 'center',      color: '#42A5F5',      fontSize: fontSize,      fontWeight: fontWeight    };    this.countViewStyle = {      backgroundColor: backgroundColor,      alignItems: 'center',      borderColor: borderColor,      borderWidth: borderWidth,      borderRadius: borderRadius,      width: width,      height: height    }  }  countdownfn(timeLeft, callback, begin) {    if (timeLeft > 0) {      this.state.begin = 1;      console.log("===lin===>");      let that = this;      let interval = setInterval(function () {        if (that.state.timeLeft < 1) {          clearInterval(interval);          callback(that)        } else {          let totalTime = that.state.timeLeft;          that.setState({            timeLeft: totalTime - 1          })        }      }, 1000)    }  }  _beginCountDown() {    if (this.state.begin === 1){      return;    }    let time = this.state.timeLeft;    console.log("===lin===> time " + time);    let afterEnd = this.afterEnd;    let begin = this.state.begin;    console.log("===lin===> start " + begin);    this.countdownfn(time, afterEnd, begin)  }  _afterEnd(that) {    console.log('------------time over');    that.setState({      begin : 0,      timeLeft : 5,    })  }  componentDidMount() {  }  render() {    return (      <View style={{position:'absolute',top:13,right:43,height:30}}>        <Text          onPress={this._beginCountDown.bind(this)}          style={{color: '#42A5F5', fontSize: 17,height:40 , zIndex:999}}> { this.state.begin === 0 ? '點(diǎn)擊獲取驗(yàn)證碼' : this.state.timeLeft} </Text>      </View>    )  }}

應(yīng)用代碼

<MyCountTime timeLeft={5}></MyCountTime>

當(dāng)然這只是,最簡(jiǎn)單的應(yīng)用的代碼,我們還提供了很多的自定義的屬性,大家可以根據(jù)自己項(xiàng)目的需要,去調(diào)節(jié)這些參數(shù)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 敦化市| 长白| 卓资县| 集贤县| 华宁县| 佳木斯市| 墨竹工卡县| 盐源县| 钟山县| 高安市| 贵州省| 綦江县| 波密县| 元江| 壶关县| 呼和浩特市| 广平县| 攀枝花市| 张家口市| 伊金霍洛旗| 香河县| 万山特区| 尤溪县| 八宿县| 奉贤区| 新沂市| 吴江市| 衡南县| 万州区| 融水| 成安县| 师宗县| 蒙山县| 沅江市| 清新县| 甘泉县| 成武县| 佛坪县| 盐源县| 十堰市| 舞阳县|