一个非常简单的react native计时器demo

一个非常简单的react native计时器demo

因为最近在学习react native，所以自己也一边学习，一边记下自己的笔记。今天看到定时器，所以写了一个简单的计时器。

定时器：

 
 
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 (
        
    
    
          
     
     
      
      请选择时长(s)
     
     
          
     
     
      
      {this.setState({data:txt});this._index=txt;}}>

          
     
     
          
     
     
            
      
      
       
       
              {this.state.data}
            
      
      
          
     
     
          
     
     
              
      
      
                  
       
       
        
        开始
       
       
                 
              
      
      
               
      
      
                  
       
       
        
        暂停
       
       
                 
              
      
      
          
     
     
        
    
    
    );
  }
}
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);