点击按钮发送请求获取验证码,获取成功后按钮上显示倒计时
install:
npm install react-native-smscode-count-down --save
usage:
import CountDownButton from 'react-native-smscode-count-down'
...
<CountDownButton
style={{width: 110,marginRight: 10}}
executeFunc={(shouldStartingCounting)=>{
this.shouldStartingCounting = shouldStartingCounting
}}
textStyle={{color: 'blue'}}
timerCount={60}
timerTitle={'获取验证码'}
enable={phoneNum.length > 10}
onClick={(shouldStartCountting)=>{
//随机模拟发送验证码成功或失败
const requestSucc = Math.random() > 0.5;
shouldStartCountting(requestSucc)
}}
timerEnd={()=>{
this.setState({
state: '倒计时结束'
})
}}/>
props | type | default value | mark |
---|---|---|---|
onClick | func | - | 点击后触发,同时将按钮置为不可用,配合shouldStartCountting 使用 |
timerCount | number | 60 | 倒计时时长 |
shouldStartCountting | func | - | 决定是否开始倒计时的回调函数,参数类型Bool |
style | View style | - | - |
textStyle | Text style | - | - |
disableColor | string | gray | 按钮不可用状态下的颜色 |
enable | bool | false | 按钮是否可用(比如用户输入合法手机号时可用,否则不可用) |
timerEnd | func | - | 倒计时结束的回调函数 |
timerTitle | string | 获取验证码 | - |
timerActiveTitle | array | ['重新获取(', 's)'] | 倒计时的数字会插在数组第一项之后,如:['请在', '秒后重新获取'],显示为【请在60秒后重新获取】 |
executeFunc | func | - | 倒计时组件加载完成后,立刻回吐开始倒计时的方法shouldStartCountting (看下边注释), 把这个方法绑定到当前对象,可以通过手动调用触发倒计时(具体用法可以参考App.js中的实现) |
shouldStartCountting
:回调函数,接受一个Bool
类型的参数shouldStartCountting(true)
,开始倒计,但按钮仍不可点击,直到倒计时结束shouldStartCountting(false)
, 按钮恢复可点击状态,但不会开始倒计时