React-native-smscode-count-down NPM

RNCountDown

npm.io npm npm.io

点击按钮发送请求获取验证码，获取成功后按钮上显示倒计时

npm.io

使用

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中的实现)