因?yàn)轫?xiàng)目購(gòu)物需要搶購(gòu)倒計(jì)時(shí)展示功能攻旦，所以封裝了個(gè)時(shí)分秒倒計(jì)時(shí)控件。把獲取的的時(shí)間戳換算成時(shí)分秒傳遞給控件，時(shí)間戳換算請(qǐng)看另一篇文章《React Native之計(jì)算服務(wù)器獲取時(shí)間戳與當(dāng)前時(shí)間的差值(算出天時(shí)分秒)》。
控件展示.png
下邊看下控件的具體實(shí)現(xiàn)：
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是自己定義的數(shù)據(jù)對(duì)象（包含時(shí)分秒具體數(shù)據(jù)）
###//compentType//判別狀態(tài)
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,//判別狀態(tài)
}
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: '',
};
###//開(kāi)始倒計(jì)時(shí)
this._startTimer();
}
componentWillReceiveProps(nextProps) {
###//獲取到傳遞的數(shù)據(jù)時(shí)便開(kāi)始倒計(jì)時(shí)
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() });
}
}
/**
* 啟動(dòng)定時(shí)器倒計(jì)時(shí)
* @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) {
//小點(diǎn)是文字
if (compentType && compentType === 'goodDetail') {
return (<Text style={{ marginLeft: 2, height: 25, width: 5, color: '#ffffff' }}>:</Text>);
} else {
//小點(diǎn)是圖片
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() {
//如果不傳遞參數(shù)量愧，則顯示默認(rèn)
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>
);
}
}
使用控件的時(shí)候需要這樣暖哨，所傳的參數(shù)是props傳遞過(guò)來(lái)的沛慢。
item是包含時(shí)分秒的對(duì)象
/**
* 倒計(jì)時(shí)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}
/>);
}
使用的時(shí)候有什么地方不懂可以隨時(shí)留言匹厘。
代碼請(qǐng)戳這里略有修改https://github.com/miaozhang9/reactCountDownView
