React-Native 简单发送验证码实现

项目需要写了一个最简单的发送验证码的按钮。虽然功能很简单，但是万一要是有人需要呢？

export class GainIdentify extends Component{
  static propTypes = {
    action:PropTypes.func,
    time:PropTypes.number,
  }

  static defaultProps = {
    action:function(){
      console.log('未定义方法')
    },
    time:60
  }
  constructor(props){
    super(props);
    this.state={
      timing:this.props.time,
    }
  }
  render(){
    return (
      <TouchableOpacity 
          style={{
              alignItems:'center',
              marginLeft:10,
              width:90,
          }}
          activeOpacity={1}
          onPress={this.state.timing==this.props.time?this.timeout.bind(this):null}
      >
        <Text>
          {this.state.timing==this.props.time?'获取验证码':this.state.timing+'s'}
        </Text>
      </TouchableOpacity>
    );
  }

  countDown(){
    if(this.state.timing == 0){
      this.setState({
          timing:60,
      })
    }else{
      this.setState({
          timing:this.state.timing-1,
      });
      //这里使用 setTimeout 不是因为不知道setInterval 而是因为setInterval 固有的缺陷 
      // 相亲请移步到  中的超时调用一节
      setTimeout(this.countDown.bind(this),1000); 
    }
  }
  timeout(){
    try {
      if(typeof this.props.action === "function") { //是函数    其中 FunName 为函数名称
          this.props.action();
      } else { //不是函数
          //alert("not is function");
          console.log('action not is function');
      }
    } catch(e) {}
    this.countDown();
  }
}

组件使用的很简单，
TouchableOpacity 用来实现点击效果和一些样式，并且根据状态(state) 来判断是否执行方法
Text根据不同的状态（state）显示不同的内容，倒计时或者是“显示获取验证码”
使用如下方式调用

//time 是从多少秒开始倒计时，action传递点击发送验证码触发的方法
 <GainIdentify time={60} action={this.gainIdentify.bind(this)}/>

 gainIdentify(){
        console.log("获取验证码方法");
    }

以上，如果有对代码更好的建议，可以联系我哦。
QQ:674054067

全部栏目

React-Native 简单发送验证码实现