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