功能：
实现倒计时组件，倒计时结束可以执行方法
1、CountDown.js
import React, {
Component
}from 'react';
import {
StyleSheet,
View,
Text,
Image,
ViewPropTypes
}from 'react-native';
import PropTypesfrom 'prop-types';
const styles =StyleSheet.create({
cardItemTimeRemainTxt: {
fontSize:20,
color:'#ee394b'
},
text: {
fontSize:30,
color:'#FFF',
marginLeft:7,
},
container: {
flexDirection:'row',
},
//时间文字
defaultTime: {
paddingHorizontal:3,
backgroundColor:'rgba(85, 85, 85, 1)',
fontSize:12,
color:'white',
marginHorizontal:3,
borderRadius:2,
},
//冒号
defaultColon: {
fontSize:12,color:'rgba(85, 85, 85, 1)'
}
});
class CountDown extends Component {
static displayName ='Simple countDown';
static propTypes = {
date: PropTypes.string,
days: PropTypes.objectOf(PropTypes.string),
hours: PropTypes.string,
mins: PropTypes.string,
segs: PropTypes.string,
onEnd: PropTypes.func,
containerStyle:ViewPropTypes.style,
daysStyle:Text.propTypes.style,
hoursStyle:Text.propTypes.style,
minsStyle:Text.propTypes.style,
secsStyle:Text.propTypes.style,
firstColonStyle:Text.propTypes.style,
secondColonStyle:Text.propTypes.style,
};
static defaultProps = {
date:new Date(),
days: {
plural:'天',
singular:'天',
},
hours:':',
mins:':',
segs:':',
onEnd: () => {},
containerStyle:styles.container,//container 的style
daysStyle:styles.defaultTime,//天数 字体的style
hoursStyle:styles.defaultTime,//小时 字体的style
minsStyle:styles.defaultTime,//分钟 字体的style
secsStyle:styles.defaultTime,//秒数 字体的style
firstColonStyle:styles.defaultColon,//从左向右 第一个冒号 字体的style
secondColonStyle:styles.defaultColon,//从左向右 第2个冒号 字体的style
};
state = {
days:0,
hours:0,
min:0,
sec:0,
};
componentDidMount() {
//console.log(this.props.date);//"2017-03-29T00:00:00+00:00"
this.interval =setInterval(()=> {
const date =this.getDateData(this.props.date);
if (date) {
this.setState(date);
}else {
this.stop();
this.props.onEnd();
}
},1000);
}
componentWillMount() {
const date =this.getDateData(this.props.date);
if (date) {
this.setState(date);
}
}
componentWillUnmount() {
this.stop();
}
getDateData(endDate) {
let diff = (Date.parse(new Date(endDate)) - Date.parse(new Date)) /1000;
if (diff <=0) {
return false;
}
const timeLeft = {
years:0,
days:0,
hours:0,
min:0,
sec:0,
millisec:0,
};
if (diff >= (365.25 *86400)) {
timeLeft.years =Math.floor(diff / (365.25 *86400));
diff -=timeLeft.years *365.25 *86400;
}
if (diff >=86400) {
timeLeft.days =Math.floor(diff /86400);
diff -=timeLeft.days *86400;
}
if (diff >=3600) {
timeLeft.hours =Math.floor(diff /3600);
diff -=timeLeft.hours *3600;
}
if (diff >=60) {
timeLeft.min =Math.floor(diff /60);
diff -=timeLeft.min *60;
}
timeLeft.sec =diff;
return timeLeft;
}
render() {
const countDown =this.state;
let days;
if (countDown.days ===1) {
days =this.props.days.singular;
}else {
days =this.props.days.plural;
}
return (
<View style={this.props.containerStyle}>
{countDown.days>0 ?
<View style={{
flexDirection:'row',
}}>
<Text style={this.props.daysStyle}>{this.leadingZeros(countDown.days)}</Text>
<Text style={this.props.firstColonStyle}>天</Text>
</View>
:
<View></View>
}
<Text style={this.props.hoursStyle}>{this.leadingZeros(countDown.hours)}</Text>
<Text style={this.props.firstColonStyle}>{this.props.hours}</Text>
<Text style={this.props.minsStyle}>{this.leadingZeros(countDown.min)}</Text>
<Text style={this.props.secondColonStyle}>{this.props.mins}</Text>
<Text style={this.props.secsStyle}>{this.leadingZeros(countDown.sec)}</Text>
</View>
);
}
stop() {
clearInterval(this.interval);
}
leadingZeros(num, length =null) {
let length_ = length;
let num_ = num;
if (length_ ===null) {
length_ =2;
}
num_ = String(num_);
while (num_.length
num_ ='0' +num_;
}
return num_;
}
};
export default CountDown;
2、页面使用
<CountDownForMall
date={this.state.countDownTime} hours=':'
mins=':'
segs=''
daysStyle={styles.count_down_text} hoursStyle={styles.count_down_text} minsStyle={styles.count_down_text} secsStyle={styles.count_down_text} firstColonStyle={styles.count_down_first_colon_text} secondColonStyle={styles.count_down_first_colon_text} onEnd={()=>{
this.countDownEnd(true);
}}/>
count_down_text: {
fontSize:14,
color:'#000',
backgroundColor:'#fff',
width:30,
textAlign:'center',
},
count_down_first_colon_text: {
fontSize:14,
color:'#fff',
width:15,
textAlign:'center',
},
网友评论