在学习RN的时候,想模拟一般的闪屏,倒计时3S之后跳转到主页,研究了一下RN中的定时器,记录如下:
每一个Component组件中,都有几个方法来实现定时器的作用,主要有几下几个:
setTimeout(Functioncode,number),clearTimeout(id)
在规定时间后执行一次,其中setTimeout有两个参数,一个是要执行的方法,一个是规定的时间,单位为秒,该方法会返回一个ID,clearTimeout根据ID移除对应的setTimeout。
setInterval(Functioncode,number),clearInterval(id)
每到间隔时间后都执行一下代码,其中setInterval有两个参数,一个是要执行的方法,一个是规定的时间,单位为秒,该方法会返回一个ID,clearInterval根据ID移除对应的setInterval。
setImmediate,clearImmediate
据说是只执行一次,立即执行,在ComPonent中没有看到该方法(猜测是之前旧版本功能)
requestAnimationFrame, cancelAnimationFrame
在一段时间内只执行一次,在每帧刷新之后执行,requestAnimationFrame有两个参数,一个是react-native-interface.js,另一个是react-native.
具体代码如下:
constructor(props) {
super(props)
//定义一个boolean变量,来判断是否数据加载完成
this.state= {
time:3
};
}
定义一个time,3S倒计时,因为需要在界面上刷新显示,所以定义成state。
componentWillMount(){
requestAnimationFra
id=setInterval(this.deleteTime,1000);
}
在component挂载之后,进行倒计时
deleteTime= () => {
letnowTime=this.state.time;
console.log("splash=====nowTime= "+nowTime)
if(nowTime>0) {
this.setState({
time:nowTime-1
});
}else{
//
this._jump()
clearInterval(id)
}
}
倒计时处理,在计时结束后,调用clearInterval清除定时器。
其中 ID定义为class类外面,作为类的全局变量。