react native 使用setInterval构建计时器demo

最新推荐文章于 2024-04-18 10:02:41 发布
置顶 最新推荐文章于 2024-04-18 10:02:41 发布
阅读量3.7k 收藏 1
点赞数
分类专栏： react native 文章标签： react-native setInterval 计时器 demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34161388/article/details/73545376
版权 


定时器：
 
 
  • 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
            
            );
九幽神君
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Native中定时器的使用
u012762130的专栏
12-28 2616
React Native中定时器的使用React Native中定时器的使用分为ES5和ES6两种，前者使用较为麻烦ES5中使用方式 引入计时器类库 var TimerMixin = require('react-timer-mixin'); 注册计时器 mixins: [TimerMixin], 添加定时器 this.setInterval(function() { }, 3000
react-native-redux-timer:使用React Native Redux的计时器
05-01
至此，我们已经成功地在React Native应用中使用Redux实现了计时器功能。这个例子展示了如何通过Redux管理和更新状态，以及如何在React组件中与Redux store交互。这只是一个基础示例，实际项目中可能还需要考虑错误...
setInterval倒计时切换页面后不准
浮游的博客
09-15 1013
比如，setInterval指定每 100ms 执行一次，每次执行需要 5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。但是由于浏览器的优化机制，为了更极致的优化，在切换tab之后浏览器会把setInterval的执行效率降低，在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作。最近在做一个倒计时时，发现当切换浏览器tab后，再切回倒计时页面，倒计时的数据不准，比真正的剩余时间多，短时间还好，时间长了，计时器的误差会很大。也就是每次计时的误差，理想情况下，应该是0。也是一样的会出现误差。
React Native实现验证码倒计时功能
xinganbu124的博客
05-15 2010
React native实现验证码倒计时功能 实现倒计时功能使用的是核心方法setInterval，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。startwCountDown() { this.interval = setInterval(() => { this.setState({ co
探索React Timer Hook：一款高效、易用的时间管理利器
最新发布
gitblog_00028的博客
04-18 327
探索React Timer Hook：一款高效、易用的时间管理利器 项目地址:https://gitcode.com/amrlabib/react-timer-hook 在React开发中，我们经常需要处理计时器相关的任务，如倒计时、动画效果或者定时刷新数据等。然而，直接使用JavaScript的setInterval和clearInterval可能会导致一些问题，如生命周期管理和内存泄漏。为了...
0.51版本 react-native 基于setinterval轮播广告用法 最后一张照片无缝连接
qq_41284481的博客
04-04 571
1.js内容import React,{Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TextInput, ScrollView, } from 'react-native'; var ImageData=require('./data.json'); va...
react-native 定时器
卓原的进化之旅
06-26 2072
定时器是一个应用中非常重要的部分。React Native实现了和浏览器一致的定时器Timer 定时器： setTimeout, clearTimeoutsetInterval, clearIntervalsetImmediate, clearImmediaterequestAnimationFrame, cancelAnimationFrame requestAnimati
React Native 的 WiFi 连接管理器
06-08
React Native 的 WiFi 管理器 (react-native-wifi-manager) 列出、连接并获取设备上 WiFi 连接的状态。 安装 首先需要安装 react-native-wifi-manager: npm install react-native-wifi-manager --save 在 android/...
ReactNative短信验证码倒计时控件的实现代码
01-21
本文介绍了ReactNative短信验证码倒计时控件，分享给大家 功能 根据项目的需要，需要写一个自定义的控件，实现如下功能： 默认文字为点击获取验证码 点击后出现60秒的倒计时 颜色，字号可调 倒计时过程中，再次...
使用ReactNative开发的倒计时App
08-08
React Native是一种由Facebook开发的开源框架，它允许开发者使用JavaScript和React库来构建原生的移动应用程序。在“使用React Native开发的倒计时App”项目中，我们可以通过JavaScript技术来实现跨平台的iOS和...
在react native中使用阿里iconfont图标
01-08
3.在根目录中配置react-native.config.js文件 (以前是在rnpm配置，在package.json配置rnpm会有警告) module.exports = { assets: ['./src/assets/fonts/'], }; 目录结构 4.在终端使用以下命令，建立图标的联系 ...
react hooks 简单做一个倒计时的小demo， 外加时间的计时器
业余前端的职业经历
06-23 2139
计时器 这个 可能在验证码 或者拍卖的相关业务中 会用到 之前的 旧项目中我们可能会使用 类组件进行封装 现在 我们用hooks做个简单地小例子 const CountDown = ({time}) => { const [h, setH] = useState(0) const [m, setM] = useState(0) const [s, setS] = useState(0) let endTime = new Date(time).getTime(); let tim
React 定时器自动更新Demos
祥哥的说
05-14 1996
先上完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@16/umd/react.deve...
《React-Native系列》18、 RN之定时器Timer
热门推荐
等待就是浪费青春
08-17 1万+
在web开发中，我们通常需要使用定时器功能，使用setTimeout和setInterval函数。 那么在ReactNative中，是否也提供了定时器的功能呢？ 答案是肯定的。 我们还是先看看官网怎么说的。 定时器是一个应用中非常重要的部分。React Native实现了和浏览器一致的定时器Timer。 提供的方法如下： setTimeout, clearTimeout s
React native setTimeout setInterval 失效
王建忠的博客
04-27 4913
记录一个坑，在react native项目调试中，如果打开了Debug JS Remotely，即在chrome中打开了调试控制台，此时项目中setTimeout和setInterval的时间间隔会失效，表现为：不管延迟时间设置为多少，都是会马上执行或者没反应。 关掉chrome debug就好了。 这个问题折磨了我好久，后来发现它早就出现在react native的Issues中了 http...
react-native之每隔一秒刷新页面
正在Android的学习路上
03-25 7385
react-native之每隔一秒刷新页面
react--页面多个倒计时的setInterval的状态存储
w_shuhua的博客
08-03 2417
问题描述 首先我们了解一下需求，点击催一催倒计时60s，在不同的问题，不同的标签下，不同的用户倒计时状态不一样。 解决方案 我们一开始在render渲染之前，在componentWillMount周期里面，设置localStorage的key值，然后判断在localStorage里面是否有该key值，有的话，就说明该用户已经被催过，还是在倒计时的状态，点击催一催的时候，利用localStor...
React Native简介中的计时器
weixin_26750481的博客
09-08 388
Timers are a crucial section of an application. React Native implements the browser Timers. 计时器是应用程序的关键部分。 React Native实现了浏览器Timers。 A JavaScript code block is normally accomplished synchronously. Bu...
react学习笔记4--状态和生命周期
小可爱的博客
07-09 163
学习使用clock组件使代码可复用，从封装时钟开始： function Clock(props) { return( &lt;div&gt; &lt;h1&gt;hello,world&lt;/h1&gt; &lt;h2&gt;it is {props.date.toLocaleTimeString()}&lt;/h2&...
React Native定时器、直接操作（setNativeProps）、调试
呼呼
06-25 1040
React Native 进阶（三）--定时器、直接操作（setNativeProps）、调试&lt;!--more--&gt;## 定时器+ setTimeout, clearTimeout+ setInterval, clearInterval+ setImmediate, clearImmediate+ requestAnimationFrame, cancelAnimationFrame ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值