rn-countdown

A countdown component for react-native APPs. You should use this component to request a verification code that supports custom styles for different status.

Preview

Install

Install with npm:

npm install rn-countdown --save

or with yarn:

yarn add rn-countdown

Usage

1import React, {Component} from 'react';
2import {
3  StyleSheet,
4  View,
5  Button,
6  TextInput,
7  Text,
8  Dimensions
9} from 'react-native';
10import CountdownView from 'rn-countdown';
11
12export default class RNCountdownDemo extends Component {
13
14  state = {
15    hasText: false
16  };
17  phoneNumber = '';
18
19  shouldStartCountdown = () => {
20    if (this.phoneNumber) return true;
21
22    alert('电话号码不能为空!');
23    return false;
24  };
25  
26  handleNetworkFailed = () => alert('network failed');
27
28  handleStopCountdown = () => {
29    this.countdown && this.countdown.stopCountdown();
30  };
31
32  handleChangeText = text => {
33    this.phoneNumber = text;
34    this.setState({hasText: !!this.phoneNumber})
35  };
36
37  render() {
38    const style = this.state.hasText ? {backgroundColor: 'rgb(59, 197, 81)', borderWidth: 0} : {};
39    const title = this.state.hasText ? {color: '#fff'} : {};
40
41    return (
42      <View style={styles.container}>
43        <View style={styles.phoneCell}>
44          <View style={styles.phoneInfo}>
45            <Text>账号:</Text>
46            <TextInput
47              style={styles.input}
48              placeholder="请输入手机号码"
49              underlineColorAndroid="transparent"
50              onChangeText={this.handleChangeText}
51            />
52          </View>
53          <CountdownView
54            ref={r => this.countdown = r}
55            time={10}
56            title="发送验证码"
57            overTitle="重新发送"
58            style={[styles.countdown, style]}
59            titleStyle={[styles.countdownTitle, title]}
60            countingTitleTemplate="发送中({time})"
61            countingStyle={styles.countingdown}
62            countingTitleStyle={styles.countingTitle}
63            shouldStartCountdown={this.shouldStartCountdown}
64            onNetworkFailed={this.handleNetworkFailed}
65          />
66        </View>
67        <Button title="停止" onPress={this.handleStopCountdown}/>
68      </View>
69    );
70  }
71}
72
73const styles = StyleSheet.create({
74  container: {
75    flex: 1,
76    justifyContent: 'center',
77    alignItems: 'center',
78    backgroundColor: '#F5FCFF',
79  },
80  phoneCell: {
81    flexDirection: 'row',
82    alignItems: 'center',
83    justifyContent: 'space-between',
84    paddingHorizontal: 15,
85    height: 40,
86    borderBottomWidth: StyleSheet.hairlineWidth,
87    borderColor: '#ebebeb',
88    width: Dimensions.get('window').width,
89    backgroundColor: '#fff'
90  },
91  phoneInfo: {
92    flexDirection: 'row',
93    alignItems: 'center',
94  },
95  input: {
96    height: 30,
97    width: Dimensions.get('window').width * 0.4,
98    marginLeft: 10,
99    padding: 0,
100    fontSize: 14
101  },
102  countdown: {
103    borderRadius: 15,
104  },
105  countingdown: {
106    backgroundColor: 'transparent',
107    borderWidth: StyleSheet.hairlineWidth
108  },
109  countdownTitle: {color: '#ccc'},
110  countingTitle: {color: '#ccc'}
111});

Props

Prop	Type	Optional	Default	Description
style	ViewPropTypes	Yes	none	custom container style
title	string	Yes	获取短信验证码	initial title
time	number	Yes	30s	timer seconds
overTitle	string	Yes	重新获取	the title when countdown over
titleStyle	object	Yes	none	font style of countdown title
countingStyle	ViewPropTypes	Yes	none	custom style when counting down
countingTitleTemplate	string	Yes	{time}s后重新获取	counting down title, must conform to the format that contain {time}
countingTitleStyle	object	Yes	none	custom title style when counting down
shouldStartCountdown	function	Yes	return true	before start countdown, you can use this function to handle some business logic, return true to allow countdown, otherwise return false
onNetworkFailed	function	Yes	none	invoke when the network is failed, so the countdown timer will be invalid in this situation, maybe you will use it to show some message for users

Methods

Method	Description
startCountdown	start countdown
stopCountdown	stop countdown anytime you want, such as network failed or other situations