项目说明

2020/06/29 12:22 by lixingru 博客地址：https://www.cnblogs.com/itgezhu/p/12809681.html

目录结构描述

rn-countdown-btn
├── Readme.md                   // help
├── countDownButton.js          // 入口文件
└── package.json                // 记录项目信息文件

环境依赖(当前使用)

react-native 0.55.4
npm 6.9.0(*用于下载包*)

下载安装

1.运行 npm install rn-countdown-btn --save
安装的同时，将信息写入package.json中项目路径dependencies字段中，如果有package.json文件时，直接使用npm install方法就可以根据dependencies配置安装所有的依赖包，这样代码提交到github时，就不用提交node_modules这个文件夹了。

2.检查项目中根目录的node_modules里是否已有rn-countdown-btn文件夹，如果有代表已经下载安装成功，接下来可以引用了

使用例子

1. 在需要使用验证码倒计时按钮的页面引用
import CountDownButton from '../child/countDownButton';

2、在render中使用countDownButton

// 在调用倒计时获取验证码方法
_getCode = ()=>{
        if(符合条件){
            this.refs.countDown._countDownAction();//请求成功并后台验证通过后调用倒计时组件的方法开始倒计时
        }else{
            this.refs.countDown._prevent();//条件不匹配或者网络错误的时候阻止倒计时
        }
}

render(){
    return(
        <View style={styles.infoItem}>
            <Text style={{flex:1.9,fontSize:16,lineHeight:50,textAlign:'left',}}>验证码</Text>
            <View style={{flex:5,flexDirection:'row',}}>
                <TextInput
                    underlineColorAndroid='transparent'
                    placeholder='请输入验证码'
                    // placeholderTextColor="#e1e1e1"
                    onEndEditing={(event) => this.updateText(
                                                event.nativeEvent.text,'verificationCode'
                                            )}
                    keyboardType='numeric'
                    maxLength={6}
                    defaultValue={verificationCode}
                    style={{height:45,fontSize:16,textAlign:'center',paddingLeft:10,paddingRight:10,flex:1,borderRadius:3,backgroundColor:'#f0f0f0',}}
                ></TextInput>
                < CountDownButton
                    style={{marginLeft:10,backgroundColor:'#fff',borderRadius:6,borderWidth:1,borderColor:'#999998',width:100}}
                    textStyle={{paddingLeft:5,paddingRight:5, color: '#fff',fontSize: 14,lineHeight:42,textAlign:'center',color:'#000'}}
                    timerCount={30}//设置倒计时长
                    timerTitle={'获取验证码'}//设置按钮默认标题
                    onClick={this._getCode}
                    ref="countDown"
                    />
            </View>
        </View>
    )
}