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

站在用戶的角度思考問題，與客戶深入溝通，找到南召網(wǎng)站設(shè)計(jì)與南召網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋南召地區(qū)。

功能

根據(jù)項(xiàng)目的需要，需要寫一個(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í)過程中，再次點(diǎn)擊需要忽略掉
5. 倒計(jì)時(shí)完成后文本恢復(fù)成點(diǎn)擊獲取驗(yàn)證碼
6. 再幾次點(diǎn)擊同之前

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

效果

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

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

自己封裝了個(gè)控件，它內(nèi)部含有一個(gè)Text控件，然后我們又寫了一個(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>
    )
  }
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享文章：ReactNative短信驗(yàn)證碼倒計(jì)時(shí)控件的實(shí)現(xiàn)代碼-創(chuàng)新互聯(lián)
本文地址：http://www.chinadenli.net/article0/dpjpio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、Google、面包屑導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)、云服務(wù)器、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)