RN倒计时遇到的问题

2017-08-14  本文已影响0人  想成为大牛的小白

1.首先自己郁闷为什么在constructor里面必须要有super。

constructor(props){            以前一直纳闷,为什么需要用到constructor的时候,都会有一个super,搜了一下是因为初始化this,
super(props)                      不然没有this。想看具体以上的可以看网址
this.state={
hour:'',
minutes:'',
seconds:''
    }
}

好了,接下来看我写的一个超简单的倒计时

importReact, { Component }from'react';

import{

AppRegistry,

StyleSheet,

View,

Text,

Button,

}from'react-native';

export default classLoginextendsComponent {

constructor(props){

super(props);

this.state={

hour:'1',

minutes:'0',

seconds:'2',

};

}

componentWillMount() {

this._timer&&clearInterval(this._timer);

}

go_hour(){

varhu=this.state.hour;

if(hu>0){

hu--;

this.setState({hour:hu});

return1;

}else if(hu==0){

this.setState({hour:'00'});

return0;

}

};

//在这里实现借分

go_minuter(){

varmin=this.state.minutes;

if(min>0){

min--;

this.setState({minutes:min});

return1;

}else if(min==0){

varget_hu=this.go_hour();

if(get_hu==1){

this.setState({minutes:59});

return1;

}else{

this.setState({minutes:'00'});

return0;

}

}

};

//计时函数

countTime(){

this._timer=setInterval(()=>{

//  获取秒

varsc=this.state.seconds;

if(sc>0){

sc--;

this.setState({seconds:sc});

}else if(sc==0){

varget_mt=this.go_minuter();

//  如果是1的话节分成功,0就是借分失败

if(get_mt==1){

sc=59;

this.setState({seconds:sc});

}else if(get_mt==0){

this._timer&&clearInterval(this._timer);

}

}

},1000)

}

render() {

return(

{this.state.hour}:{this.state.minutes}:{this.state.seconds}

onPress={this.countTime.bind(this)}

title="开始计时"

color='#841584'

accessibilityLabel="开始计时"

/>

);

}

}

AppRegistry.registerComponent('Login', () => Login);

倒计时的代码,是一个很简单的倒计时。

上一篇下一篇

猜你喜欢

热点阅读