因为项目购物需要抢购倒计时展示功能，所以封装了个时分秒倒计时控件。把获取的的时间戳换算成时分秒传递给控件，时间戳换算请看另一篇文章《React Native之计算服务器获取时间戳与当前时间的差值(算出天时分秒)》。
控件展示.png
下边看下控件的具体实现：
import React, {
Component,
} from 'react';
import {
StyleSheet,
View,
Text,
Image,
} from 'react-native';
const styles = StyleSheet.create({
yzttext: {
justifyContent: 'center',
alignItems: 'center',
marginLeft: 2,
borderWidth: 1,
flexDirection: 'row',
},
});
export default class CountDownView extends Component {
###//item是自己定义的数据对象（包含时分秒具体数据）
###//compentType//判别状态
static propTypes = {
textColor: React.PropTypes.string,
borderTextColor: React.PropTypes.string,
borderColor: React.PropTypes.string,
height: React.PropTypes.number,
width: React.PropTypes.number,
backgroundColor: React.PropTypes.string,
fontSize: React.PropTypes.number,
item: React.PropTypes.object,
compentType: React.PropTypes.string,//判别状态
}
constructor(props) {
super(props);
this.state = {
item: this.props.item,
Second: this.props.item.seconds,
Minute: this.props.item.minutes,
Hour: this.props.item.hours,
SecondString: '',
MinuteString: '',
HourString: '',
};
###//开始倒计时
this._startTimer();
}
componentWillReceiveProps(nextProps) {
###//获取到传递的数据时便开始倒计时
this.setState({ item: nextProps.item, Second: nextProps.item.seconds, Minute: nextProps.item.minutes, Hour: nextProps.item.hours });
this._startTimer();
}
_spliceString() {
if (this.state.Second < 10) {
this.setState({ SecondString: '0'.concat(this.state.Second.toString()) });
} else {
this.setState({ SecondString: this.state.Second.toString() });
}
if (this.state.Minute < 10) {
this.setState({ MinuteString: '0'.concat(this.state.Minute.toString()) });
} else {
this.setState({ MinuteString: this.state.Minute.toString() });
}
if (this.state.Hour < 10) {
this.setState({ HourString: '0'.concat(this.state.Hour.toString()) });
} else {
this.setState({ HourString: this.state.Hour.toString() });
}
}
/**
* 启动定时器倒计时
* @returns {}
* @private
*/
_startTimer() {
this.interval && clearInterval(this.interval);
this.interval = setInterval(() => {
this.state.Second -= 1;
if (this.state.Second < 0) {
if (this.state.Minute >= 0) {
this.state.Second = 59;
// 分钟需要减去一
this.state.Minute -= 1;
}
if (this.state.Minute < 0) {
if (this.state.Hour >= 0) {
this.state.Minute = 59;
this.state.Hour -= 1;
}
if (this.state.Hour < 0) {
this.state.Hour = 0;
this.state.Minute = 0;
this.state.Second = 0;
this.interval && clearInterval(this.interval);
}
}
}
this._spliceString();
}, 1000);
}
componentDidMount() {
}
componentWillUnmount() {
this.interval && clearInterval(this.interval);
}
_renderColonView(compentType) {
//小点是文字
if (compentType && compentType === 'goodDetail') {
return (<Text style={{ marginLeft: 2, height: 25, width: 5, color: '#ffffff' }}>:</Text>);
} else {
//小点是图片
return (<Image
style={{ marginLeft: 2, height: 15, width: 3, resizeMode: 'cover' }}
defaultImage={require('../img/YZTAnyPurchase_CountDown_Colon.png')}
source={require('../img/YZTAnyPurchase_CountDown_Colon.png')}
/>);
}
}
render() {
//如果不传递参数，则显示默认
const borderTextColor = this.props.borderTextColor ? this.props.borderTextColor : '#ffffff';
const borderColor = this.props.borderColor ? this.props.borderColor : '#333333';
const height = this.props.height ? this.props.height : 55;
const width = this.props.width ? this.props.width : 55;
const backgroundColor = this.props.backgroundColor ? this.props.backgroundColor : 'rgba(0,0,0,0)';
const fontSize = this.props.fontSize ? this.props.fontSize : 24;
return (
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<View style={[styles.yzttext, { borderColor, height: height / 2, width: width / 2, backgroundColor }]}>
<Text style={{ fontSize: fontSize / 2, color: borderTextColor, backgroundColor }}>{this.state.HourString || '00'}</Text>
</View>
{this._renderColonView(this.props.compentType)}
<View style={[styles.yzttext, { borderColor, height: height / 2, width: width / 2, backgroundColor }]}>
<Text style={{ fontSize: fontSize / 2, color: borderTextColor, backgroundColor }}>{this.state.MinuteString || '00'}</Text>
</View>
{this._renderColonView(this.props.compentType)}
<View style={[styles.yzttext, { borderColor, height: height / 2, width: width / 2, backgroundColor }]}>
<Text style={{ fontSize: fontSize / 2, color: borderTextColor, backgroundColor }}>{this.state.SecondString || '00'}</Text>
</View>
</View>
);
}
}
使用控件的时候需要这样，所传的参数是props传递过来的。
item是包含时分秒的对象
/**
* 倒计时view
* @param type 类别
* @param item data
* @returns {}
* @private
*/
_renderFlashChildsView(type, item) {
return (
<ShoppingCountDownView
item={item}
compentType={this.props.compentType}
textColor={this.props.textColor}
borderTextColor={this.props.borderTextColor}
borderColor={this.props.borderColor}
height={this.props.height}
width={this.props.width}
backgroundColor={this.props.backgroundColor}
fontSize={this.props.fontSize}
/>);
}
