react native 使用setInterval构建计时器demo

59 阅读 0 评论 39 点赞

我是靠谱客的博主纯情茉莉，最近开发中收集的这篇文章主要介绍react native 使用setInterval构建计时器demo ，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

定时器：

 setTimeout, clearTimeout
setInterval, clearInterval
setImmediate, clearImmediate
requestAnimationFrame, cancelAnimationFrame
这是官方的手册上提供的，我用的是setIntelval,因为自己是学的前端，整个列子使用的是es6的语法。

下面是截图：

以下是代码：

 



1

2

3

4

5

6

7

8

9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95 


/**


 * Sample React Native App


 * https://github.com/facebook/react-native


 * @flow


 */




import
React
,
{
Component
}
from
'react'
;


import
{


AppRegistry
,


StyleSheet
,


Text
,


View
,


TextInput
,


TouchableOpacity


}
from
'react-native'
;


export
default
class
AnimateDemo
extends
Component
{


constructor
(
props
){


super
(
props
);


this
.
state
=
{


data
:
0


}


this
.
_index
=
0
;


this
.
_timer
=
null
;


}


countTime
(){


this
.
_timer
=
setInterval
(()
=>
{
this
.
setState
({
data
:
this
.
_index
--
});
if
(
this
.
state
.
data
<=
0
){


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


alert
(
"时间到了"
);


}},
1000
);


}


stopTime
(){


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


}


componentWillUnmount
()
{


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


}


render
()
{


return
(


<
View
style
=
{
styles
.
container
}
>


<
Text
>
请选择时长
(
s
)
<
/Text>


<
TextInput
onChangeText
=
{(
txt
)
=>
{
this
.
setState
({
data
:
txt
});
this
.
_index
=
txt
;}}
>




<
/TextInput>


<
View
style
=
{
styles
.
showTime
}
>


<
Text
style
=
{
styles
.
timeText
}
>


{
this
.
state
.
data
}


<
/Text>


<
/View>


<
View
style
=
{
styles
.
btngroup
}
>


<
TouchableOpacity
style
=
{
styles
.
btn
}
onPress
=
{
this
.
countTime
.
bind
(
this
)




}
>


<
Text
>
开始
<
/Text>




<
/TouchableOpacity>


<
TouchableOpacity
style
=
{
styles
.
btn
}
onPress
=
{
this
.
stopTime
.
bind
(
this
)}
>


<
Text
>
暂停
<
/Text>




<
/TouchableOpacity>


<
/View>


<
/View>


);


}


}


const
styles
=
StyleSheet
.
create
({


container
:
{


flex
:
1
,


},


btngroup
:
{


flexDirection
:
'row'
,




justifyContent
:
'space-around'


},


showTime
:
{


height
:
100
,


alignItems
:
'center'


},


btn
:
{


justifyContent
:
'center'
,


width
:
60
,


height
:
40
,


backgroundColor
:
'#7ecfe8'
,


alignItems
:
'center'




},


timeText
:
{


color
:
'red'
,


fontSize
:
22
,


}




})








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