react native 使用setInterval构建计时器demo

定时器：

• setTimeout, clearTimeout
• setInterval, clearInterval
• setImmediate, clearImmediate
• requestAnimationFrame, cancelAnimationFrame

这是官方的手册上提供的，我用的是setIntelval,因为自己是学的前端，整个列子使用的是es6的语法。

下面是截图：

以下是代码：

/** * 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 );