rns
react-native-sk-countdown
npm i react-native-sk-countdown
rns

react-native-sk-countdown

A simple countdown component for React Native, pure js

by shigebeyond

1.0.1 (see all)License:MITTypeScript:Not Found
npm i react-native-sk-countdown
Readme

react-native-sk-countdown

##What is it react-native-sk-countdown is a simple countdown component for React Native, pure js implementation

##How to use it

  1. npm install react-native-sk-countdown@latest --save

  2. Write this in index.ios.js / index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

var {CountDownText} = require('react-native-sk-countdown');

var test = React.createClass({
  render: function(){
    return (
      <View style={styles.container}>
        <Text style={styles.tip}>{'CountDown in seconds \n 以秒为单位的倒计时'}</Text>
        <View style={styles.row}>
          <CountDownText
            style={styles.cd}
            countType='seconds' // 计时类型:seconds / date
            auto={true} // 自动开始
            afterEnd={() => {}} // 结束回调
            timeLeft={10} // 正向计时 时间起点为0秒
            step={-1} // 计时步长,以秒为单位,正数则为正计时,负数为倒计时
            startText='获取验证码' // 开始的文本
            endText='获取验证码' // 结束的文本
            intervalText={(sec) => sec + '秒重新获取'} // 定时的文本回调
          />
        </View>
        <Text style={styles.tip}>{'CountDown in timestamp \n 以日期-时间为单位的倒计时'}</Text>
        <View style={styles.row}>
          <CountDownText // 倒计时
            style={styles.cd}
            countType='date' // 计时类型:seconds / date
            auto={true} // 自动开始
            afterEnd={() => {}} // 结束回调
            timeLeft={10} // 正向计时 时间起点为0秒
            step={-1} // 计时步长,以秒为单位,正数则为正计时,负数为倒计时
            startText='' // 开始的文本
            endText='' // 结束的文本
            intervalText={(date, hour, min, sec) => date + '天' + hour + '时' + min + '分' + sec} // 定时的文本回调
          />
        </View>
      </View>
    )
  }
});


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  row: {
    padding: 7,
    backgroundColor: 'red',
    borderRadius: 7,
  },
  tip: {
    fontSize: 20,
  },
  cd: {
    textAlign: 'center',
    color: 'white',
    fontSize: 20,
  },
});

AppRegistry.registerComponent('test', () => test);

##Properties

Any Text property and the following:

PropDescriptionDefault
countTypeCountdown type, one of 'seconds' and 'date'.None
autoWhether to start countdown right now.false
timeLeftSeconds lefted to countdown.None
stepNumber to increment in each step.-1
startTextText before countdown.None
endTextText after countdown.None
intervalTextA function to reture a text during countdown.None
afterEndA callback function after countdown.None

##Methods

MethodDescriptionParams
startstart countdown.None
endfinish countdown.None

Downloads/wk

1

GitHub Stars

45

LAST COMMIT

7yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

7

OPEN PRs

6
VersionTagPublished
1.0.1
latest
7yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate