使用es6用react native创建计时器

create timer with react native using es6

本文关键字：创建 计时器 native react es6 使用      更新时间：2023-09-26

我希望添加一个定时器到我的应用程序，这是使用react native构建的。

我已经在文档中查看了定时器mixin的链接，但是我已经使用es6构建了应用程序的其余部分，所以这将不兼容。

我试过以下方法。

在Main类中，我有一个名为getTimerCountDown的函数

getTimerCountDown() {
    setTimeout(() => {
      this.setTimeRemaining(this.getTimeRem()-1);
    }, 1000);
}
getTimeRem() {
    return this.state.timeRemaining;
}

我已经尝试在componentDidUpdate中调用它，如下所示。如果我不与UI进行任何其他交互，它就会像我希望的那样工作。

如果我这样做(例如我有一个按钮，我可以点击视图)作为' componentDidUpdate再次被调用计数器变得非常快(因为它被调用了x次)

componentDidUpdate(){
    this.getTimerCountDown();
}

我不确定我是否完全在错误的轨道上，或者我所做的一个小小的改变可以让我得到我想要的。在react native中使用es6让一个倒计时计时器工作的最好方法是什么?

定时器类在主页

<Timer timeRem={this.getTimeRem()} />

返回
render(){
    return (
        <View style={styles.container}>
            <Text> This is the Timer : {this.props.setTimer}  - {this.props.timeRem} </Text>
        </View>
    )
}

我真的不确定如何工作，即使没有任何其他UI交互。componentDidUpdate在每次组件重新渲染时被调用，当内部状态或向下传递的道具发生变化时发生。这可不是你能指望每时每刻都发生的事。

如何将getTimerCountDown移动到您的componentDidMount方法(只调用一次)，然后使用setInterval而不是setTimeout来确保计数器连续递减?

有点晚了，但是你可以试试我在react-native中为处理计时器和es6组件制作的这个组件:

https://github.com/fractaltech/react-native-timer

想法很简单，维护和清除组件上的计时器变量是一件痛苦的事情，所以简单地说，在一个单独的模块中维护它们。例子:

// not using ES6 modules as babel has broken interop with commonjs for defaults 
const timer = require('react-native-timer');
// timers maintained in the Map timer.timeouts 
timer.setTimeout(name, fn, interval);
timer.clearTimeout(name);
// timers maintained in the Map timer.intervals 
timer.setInterval(name, fn, interval);
timer.clearInterval(name);
// timers maintained in the Map timer.immediates 
timer.setImmediate(name, fn);
timer.clearImmediate(name);
// timers maintained in the Map timer.animationFrames 
timer.requestAnimationFrame(name, fn);
timer.cancelAnimationFrame(name);

试试这个

Timer.js 

import React, { Component } from "react";
import { View,Text,Button,StyleSheet } from "react-native";
const timer = () => {};
class Timer extends Component {
    constructor(props) {
    super(props);
    this.state = {
      remainingTime: 10
     };
    }
 countdownTimer(){
   this.setState({remainingTime:10 });
   clearInterval(timer);
   timer = setInterval(() =>{
        if(!this.state.remainingTime){
          clearInterval(timer);
          return false;
        }
        this.setState(prevState =>{
        return {remainingTime: prevState.remainingTime - 1}});
        },1000);
    }
    render() {
      return (
       <View style={styles.container}>
         <Text>Remaining time :{this.state.remainingTime}</Text>
          <Button title ="Start timer" onPress={()=>this.countdownTimer()}/>
       </View>
     );
   }
  }

  const styles = StyleSheet.create({
    container:{
     flex:1,
     justifyContent:'center',
     alignItems:'center',
   } 
});
  export default Timer;

App.js 

import React, { Component } from "react";
  import { View,Text,Button,StyleSheet } from "react-native";
  import Timer from './timer';
  export default class App extends Component{
   render(
    return (<Timer />)
   );
 }

下面是如何在react-native中创建定时器(pomodoro timer)的完整代码;

Timer.js 

import React from 'react'
import {Vibration, View, Button, Text, TextInput, StyleSheet} from 'react-native'

let pomInterval;
export default class Timer extends React.Component {
    constructor() {
        super();
        this.state = {
            minutes: 5,
            seconds: 0,
            workmins: 5,
            worksecs: 0,
            breakMins: 2,
            breakSecs: 0,
            timerState: 'WORK TIMER',
            btnState: 'Start'
        }
    }
    vibrate = () => {
        Vibration.vibrate([500, 500, 500])
    }
    pomTimer = () => {
        pomInterval = setInterval(() => {
            let newSec = this.state.seconds;
            newSec--;
            if(newSec < 0) {
                newSec = 59;
                this.state.minutes--;
            }
            this.setState({
                seconds: newSec,
            })
            if(newSec <= 0 && this.state.minutes <= 0) {
                this.vibrate();
                if(this.state.timerState == 'WORK TIMER') {
                    this.setState({
                        timerState: 'BREAK TIMER',
                        minutes: this.state.breakMins,
                        seconds: this.state.breakSecs
                        
                    })
                }else {
                    this.setState({
                        timerState: 'WORK TIMER',
                        minutes: this.state.workmins,
                        seconds: this.state.worksecs
                    })
                }
            }
        }, 1000);
    }

    changeWorkMin = mins => {
        clearInterval(pomInterval);
        this.setState({
            minutes: mins || 0,
            workmins: mins || 0,
            btnState: 'Start'
        })
    }
    changeWorkSec = secs => {
        clearInterval(pomInterval);
        this.setState({
            seconds: secs || 0,
            worksecs: secs || 0,
            btnState: 'Start'
        })
    }
    changeBreakMin = mins => {
        clearInterval(pomInterval);
        this.setState({
            breakMins: mins || 0,
            btnState: 'Start'
        })
    }
    changeBreakSec = secs => {
        clearInterval(pomInterval);
        this.setState({
            breakSecs: secs || 0,
            btnState: 'Start'
        })
    }
    // Creating the functionality for the pause/start button
    chnageBtnState = () => {
        if(this.state.btnState == 'Start') {
            this.pomTimer();
            this.setState({
                btnState: 'Pause'
            })
        }else {
            clearInterval(pomInterval);
            this.setState({
                btnState: 'Start'
            })
        }
    }
    // Creating the functionality for the reset button
    reset = () => {
        clearInterval(pomInterval);
        if(this.state.timerState == 'WORK TIMER') {
            this.setState({
                minutes: this.state.workmins,
                seconds: this.state.worksecs,
                btnState: 'Start'
            })
        }else {
            this.setState({
                minutes: this.state.breakMins,
                seconds: this.state.breakSecs,
                btnState: 'Start'
            })
        }
    }
    render() {
        return (
            <View style={styles.viewStyles}>
                <Text style={styles.textStyles}>{this.state.timerState}</Text>
                <Text style={styles.textStyles}>{this.state.minutes}:{this.state.seconds}</Text>
                <Text>
                    <Button title={this.state.btnState} onPress={this.chnageBtnState} />
                    <Button title='Reset' onPress={this.reset} />
                </Text>
                <Text>Work Time:</Text>
                <TextInput style={styles.inputStyles} value={this.state.workmins.toString()} placeholder='Work Minutes' onChangeText={this.changeWorkMin} keyboardType='numeric' />
                <TextInput style={styles.inputStyles} value={this.state.worksecs.toString()} placeholder='Work Seconds' onChangeText={this.changeWorkSec} keyboardType='numeric' />
                <Text>Break Time:</Text>
                <TextInput style={styles.inputStyles} value={this.state.breakMins.toString()} placeholder='Break Minutes' onChangeText={this.changeBreakMin} keyboardType='numeric' />
                <TextInput style={styles.inputStyles} value={this.state.breakSecs.toString()} placeholder='Break Seconds' onChangeText={this.changeBreakSec} keyboardType='numeric' />
            </View>
        )
    }
}
// Creating a style sheet to write some styles
const styles = StyleSheet.create({
    viewStyles: {
        alignItems: 'center'
    },
    textStyles: {
        fontSize: 48
    },
    inputStyles: {
        paddingHorizontal: 50,
        borderColor: 'black',
        borderWidth: 1
    }
})

App.js 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Timer from './timer';
export default function App() {
  return (
    <View style={styles.container}>
      <Timer />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这就是我们如何创建一个番茄工作制定时器，一个定时器有工作定时器和休息定时器，当一个定时器到达终点时，它会震动手机。我还添加了输入功能，即您可以动态更改分钟和秒的值(无论是工作计时器还是休息计时器正在进行)。我还添加了开始/暂停按钮和重置按钮。

相关文章：