倒计时组件react-native-sk-countdown的使用
import React,{Component} from 'react' import { StyleSheet, Text, } from 'react-native'; var update = require('react-addons-update') var countDown = require('./countDown')
到 node_modules 下找到 react-native-sk-countdown 下的 CountDownText.js 改成上面这样子。
然后在引用的时候,
import {CountDownText} from 'react-native-sk-countdown'
同时
安装npm install react-addons-update --save这个包就可以了
使用规则:
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> ) } });