All Projects → yongqianvip → RNCountDown

yongqianvip / RNCountDown

Licence: MIT license
通过点击按钮,在按钮上显示倒计时

Programming Languages

javascript
184084 projects - #8 most used programming language
objective c
16641 projects - #2 most used programming language
python
139335 projects - #7 most used programming language
java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to RNCountDown

CountdownView
Simple countdown view with custom animations
Stars: ✭ 70 (+66.67%)
Mutual labels:  countdown-timer
CountDownTimerSwift
This is a simple and beautiful countdown timer project done using swift
Stars: ✭ 18 (-57.14%)
Mutual labels:  countdown-timer
howlonguntilprayuthleaves.com
นับเวลาถอยหลังถึงวันที่พลเอกประยุทธ์ จันทร์โอชา หมดวาระการเป็นนายกรัฐมนตรี
Stars: ✭ 29 (-30.95%)
Mutual labels:  countdown-timer
easyCountDownTimer
A simple android library to countdown timer textview for api 14+
Stars: ✭ 61 (+45.24%)
Mutual labels:  countdown-timer
react-timer-wrapper
Composable React Timer component that passes status props to children, in addition to some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track time while active.
Stars: ✭ 14 (-66.67%)
Mutual labels:  countdown-timer
CountdownTimer-TeLeTiPs
The very first powerful Telegram bot to countdown to your important events in any group chat. Live countdown timer (days : hours : minutes : seconds)
Stars: ✭ 122 (+190.48%)
Mutual labels:  countdown-timer
vuejs-countdown-timer
⏱ Vue 2 event countdown and timer component
Stars: ✭ 47 (+11.9%)
Mutual labels:  countdown-timer
CountDownTextView
A count down widget for verify code
Stars: ✭ 22 (-47.62%)
Mutual labels:  countdown-timer
ZXCountDownView
【杀不死的倒计时】一个简单易用的倒计时View,常用于快速创建点击获取验证码按钮,支持各种自定义样式。(特点:重新进入当前页面或重启程序倒计时不会重置,仍将继续执行,且退出程序后的时间也会被自动计算在内)
Stars: ✭ 56 (+33.33%)
Mutual labels:  countdown-timer
date-countdown
A date countdown applet
Stars: ✭ 15 (-64.29%)
Mutual labels:  countdown-timer
yii2-time-down-counter
Widget for yii2, to start count down timer with a lot of options, This widget build dependence of timeDownCounter JS library
Stars: ✭ 15 (-64.29%)
Mutual labels:  countdown-timer
countdown-vuejs
A Countdown Timer component for Vue.js
Stars: ✭ 58 (+38.1%)
Mutual labels:  countdown-timer
HWCountdownDemo
A countdown demo.
Stars: ✭ 55 (+30.95%)
Mutual labels:  countdown-timer
vue-flip-down
vue 翻页倒计时组件 妙啊
Stars: ✭ 90 (+114.29%)
Mutual labels:  countdown-timer
CountdownTimer
Countdown timer app built in Jetpack Compose
Stars: ✭ 38 (-9.52%)
Mutual labels:  countdown-timer

RNCountDown

npm NPM

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

使用

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), 按钮恢复可点击状态,但不会开始倒计时
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].