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

最新推荐文章于 2025-07-03 21:32:10 发布

原创最新推荐文章于 2025-07-03 21:32:10 发布 · 7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发 #javascript #native

学习专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用React Native和ES6语法实现的简单计时器应用。通过setInterval进行定时更新状态，演示了计时器的基本功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个非常简单的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);