? ? ? ? 對于RN，我想說，確實(shí)簡單（入門簡單，之后還在探索，~~~~(>_<)~~~~），搞了兩年Android開發(fā)，F(xiàn)B突然開源出來個(gè)RN，搞得公司蠢蠢欲動(dòng)，我擦嘞，（Write Once, Write Everywhere）一處編寫，處處編寫，好厲害的樣子呢。項(xiàng)目歷經(jīng)一個(gè)月也終于搞定，回頭看，好心酸，不斷挖坑，填坑，挖坑，填坑，挖......
? ? ?廢話不多說，進(jìn)入今天的話題，倒計(jì)時(shí)組件的封裝，對于電商，那些搶購倒計(jì)時(shí)什么的，說真的，很煩，而且多處都要使用，然后鄙人就封裝了下。
? ? 封裝組件，主要是實(shí)用性，適用性，和拓展性，首先，我們要確定，一個(gè)組件，要適用很多種情況，就需要根據(jù)特定的需求，顯示所需的頁面，OK，我放出了4個(gè)可以自己定義的屬性和一個(gè)方法（倒計(jì)時(shí)結(jié)束后出發(fā)），這些需要傳遞（不傳遞即默認(rèn)樣式，無觸發(fā)方法）
屬性： 1 style，倒計(jì)時(shí)整體的樣式。
? ? ? ? ? ? 2 textTimeStyle 時(shí)間前面的天（小時(shí)，分，秒）等的樣式
? ? ? ? ? ? 3 textUnitStyle 所需顯示的時(shí)間的樣式，比如 5天2小時(shí)23分20秒（數(shù)字的樣式）
? ? ? ? ? ? 4 millisUntilFinished ?傳遞的時(shí)間（單位毫秒）
方法：1 refreshData ?倒計(jì)時(shí)結(jié)束 觸發(fā)的方法
在開始封裝時(shí)候，我們還需要知道一些單位直接的換算：
//時(shí)間轉(zhuǎn)化率
const ss =1000;
const mi = ss *60;
const hh = mi *60;
const da = hh *24;
以上時(shí)間直接的換算，我就不多說了，大家都懂，如果不知道的，你可能上了個(gè)假大學(xué)。
好了，接下來是整個(gè)代碼（一拿即可使用，不用謝）：
'use strict';
importReact,{Component}from'react';
import{
StyleSheet,
View,
Text,
}from'react-native';
import*asStringsfrom'../value/strings'
//時(shí)間轉(zhuǎn)化率
const ss =1000;
const mi = ss *60;
const hh = mi *60;
const da = hh *24;
export default classCountDownTimerextendsComponent {
//屬性類型：
staticpropTypes= {
// textTimeStyle: React.PropTypes.object,
// textUnitStyle: React.PropTypes.object,
millisUntilFinished: React.PropTypes.number,
refreshData: React.PropTypes.func,
day: React.PropTypes.number,
hour: React.PropTypes.number,
minute: React.PropTypes.number,
second: React.PropTypes.number,
}
constructor(props) {
super(props);
//計(jì)算剩余的天、小時(shí)、分鐘、秒鐘,默認(rèn)都是0
letday =this.props.millisUntilFinished==undefined?0: (this._handlerNumber(this.props.millisUntilFinished,da));
lethour =this.props.millisUntilFinished==undefined?0:this._handlerNumber(this.props.millisUntilFinished-
this._handlerMultiplyNumber(day,da),hh);
letminute =this.props.millisUntilFinished==undefined?0:this._handlerNumber(this.props.millisUntilFinished-
this._handlerMultiplyNumber(day,da) -this._handlerMultiplyNumber(hour,hh),mi);
letsecond =this.props.millisUntilFinished==undefined?0:this._handlerNumber(this.props.millisUntilFinished-
this._handlerMultiplyNumber(day,da) -this._handlerMultiplyNumber(hour,hh) -this._handlerMultiplyNumber(minute,mi),ss);
this.state= {
day: day,
hour: hour,
minute: minute,
second: second
}
}
componentDidMount() {
this._startCountDownTimer();//開始倒計(jì)時(shí)
}
componentWillUnmount() {
this._stopCountDownTimer();//結(jié)束倒計(jì)時(shí)
}
/**
*開始倒計(jì)時(shí)
*@private
*/
_startCountDownTimer() {
const{day,hour,minute,second} =this.state;
console.log("剩余"+ day +"天"+ hour +"時(shí)"+ minute +"分"+ second +"秒");
this.interval=setInterval(() => {
if(day !=0|| hour !=0|| minute !=0|| second !=0) {
if(this.state.second==0) {
if(this.state.minute==0) {
if(this.state.hour==0) {
if(this.state.day==0) {
this._endCountDownTimer();
}else{//天數(shù)不為0
this.setState({
day:this.state.day-1,
hour:23,
minute:59,
second:59
})
}
}else{//小時(shí)不為0
this.setState({
hour:this.state.hour-1,
minute:59,
second:59
})
}
}else{//分不為0
this.setState({
minute:this.state.minute-1,
second:59
})
}
}else{//秒不為0
this.setState({
second:this.state.second-1
});
}
}else{
// this._endCountDownTimer();
}
},1000);
}
//倒計(jì)時(shí)結(jié)束調(diào)用
_endCountDownTimer(){
if(this.props.millisUntilFinished!=0||this.props.millisUntilFinished!=undefined) {
this.props.refreshData();
}
this.setState({
day:0,
hour:0,
minute:0,
second:0
})
this._stopCountDownTimer();
}
/**
*頁面關(guān)閉時(shí),停止倒計(jì)時(shí)
*@private
*/
_stopCountDownTimer() {
this.interval&&clearInterval(this.interval);
}
/**
*當(dāng)傳入的數(shù)字是一位數(shù),在前面補(bǔ)0,湊足2位
*@paramdata天,時(shí),分,秒
*@returns{*}
*@private
*/
_addNumber(data) {
if(data !=0&& data !=undefined) {
if(data <10) {
return'0'+ data;
}
returndata;
}else{
return'00';
}
}
/**
*處理數(shù)據(jù)
*@paramtime時(shí)間
*@paramdata轉(zhuǎn)換率
*@private
*/
_handlerNumber(time,data) {
if(time < data) {
return0;
}else if(time == data) {
return1;
}else{
returnparseInt(time / data);//取整
}
}
/**
*兩數(shù)相乘,,處理0* data或者data * 0的問題
*@paramdata1
*@paramdata2
*@private
*/
_handlerMultiplyNumber(data1,data2) {
if(data1 !=undefined&& data2 !=undefined&& data1 !=0&& data2 !=0) {
returndata1 * data2;
}
return0;
}
conststyles = StyleSheet.create({
container: {
flexDirection:'row',
justifyContent:'center',
alignItems:'center'
}
}）
核心方法：_startCountDownTimer（），開始倒計(jì)時(shí)，_stopCountDownTimer（），手動(dòng)觸發(fā)關(guān)閉倒計(jì)時(shí)（關(guān)閉當(dāng)前頁也會(huì)觸發(fā)），之中還有些方法，是處理數(shù)據(jù)用到的，其實(shí)可以寫在工具類里面的。寫的很直白了，如果還有問題，先看看有關(guān)RN生命周期的資料或者文檔，說這么，調(diào)用處我還沒說。。看下圖：
container: {
flexDirection:'row',
justifyContent:'center',
alignItems:'center'
}
})
別怪我。。調(diào)用處截圖也是為你們好，終于不能復(fù)制了，哈哈。
說了這么多，效果還沒出來（說了這么多，我就是想裝逼，(*^__^*) 嘻嘻……），看看效果圖吧，動(dòng)態(tài)的不會(huì)搞。（第一次寫，見諒）：
? ? ? ? 上面就是默認(rèn)屬性，就是我之前所提到的4屬性1方法，只傳了時(shí)間，其他都不傳的效果圖（android，ios都使用）。
? ? ? ? 后續(xù)鄙人還會(huì)發(fā)一些自己封裝的組件，最近在研究redux，差不多會(huì)把接入了redux的項(xiàng)目發(fā)布出來。android相關(guān)我親自進(jìn)過的坑，也會(huì)發(fā)布出來跟大家分享。
? ? ? ?剛好快過年了，小弟先祝大家新年快樂，有什么問題留言即可，或者有什么想封裝的，可以跟我說，上面的代碼我都沒講解，大家可以看看，琢磨琢磨，學(xué)到了，還是自己的。（第一次寫，有什么情況，都請留言（贊，噴，我都接著，請輕噴））。
源碼地址：https://github.com/niyige/justCoder/blob/master/src/view/countDownTimer.js
? ? ? ?注：對于布局部分截圖，是這樣的，那些view節(jié)點(diǎn)或者組件節(jié)點(diǎn)，不會(huì)顯示出來的，可能是簡書里面支持這些節(jié)點(diǎn)吧。大冷天在一個(gè)一個(gè)字的敲，好苦逼的，轉(zhuǎn)載請注明出處，謝謝。
