Question

//导入不同的文件

import * as React from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';
import { Constants } from 'expo';
import AssetExample from './components/AssetExample';

//创建样式表

const styles = StyleSheet.create({
  appContainer : {
    flex :1 ,
    alignItems : 'center',
    justifyContent : 'center',
  },
  text : {
    fontSize : 40 ,
  }
})

export class App extends React.Component{

//在此处创建构造函数并设置状态

  constructor(props)
  {
    super(props)
    this.state = ({
      minutes : 0,
      seconds : 4,
      pause : false,
  })
}

//计时器启动功能持续数分钟，如果将其减少1，则自动设置秒状态。

startTimer = () => {
  this.setState({
     minutes : this.state.minutes - 1,
    seconds : 4
    })
 }

// Timer2可将秒数每秒钟减少1。

 startTimer2 = () => {
  this.setState({
    seconds : this.state.seconds - 1 

  })
  console.log(this.props.toggle)

 }

//这里两个计时器的设置间隔。

 componentDidMount = () => {
 this.interval = setInterval(this.startTimer , 5000)
   this.interval2 = setInterval(this.startTimer2 , 1000) 
 }

//如果分钟数小于零，则不会更新。

 shouldComponentUpdate = (nextProps , nextState) => {
 if(nextState.minutes >= 0 ) 
 {
 return( 

true
 )
 }

///只要清除间隔，就清除

 else {
  clearInterval(this.interval)
  clearInterval(this.interval2)
   }
   }

//组件将卸下

   componentWillUnmount = () => {
   clearInterval(this.interval)
   clearInterval(this.interval2)
   }

//切换暂停时间

   pauseTimer = ()=> {
                  this.setState({
                      pause : !this.state.pause
                                               })
                                   }

//一个渲染功能

         render() {

                  if(this.state.minutes === 0  && this.state.seconds === 0)
 {
     return(
      <View style = {styles.appContainer}>
  <Text style ={styles.text}>
  Break is over
  </Text>

  </View>
    )

    }
     else if (this.state.pause === false)
     {

     return (
     <View style = {styles.appContainer}>
     <Text style ={styles.text}>
     {this.state.minutes} : {this.state.seconds}

      </Text>
      <Button title = "Pause" onPress = {()=>this.pauseTimer()} 
      />

      </View>
      )
      }

    else {

     return (
     <View style = {styles.appContainer}>
     <Text style ={styles.text}>
      {this.state.minutes} : {this.state.seconds}
                Paused
          </Text>
      <Button title = "Start again" onPress = {()=>this.pauseTimer()}/>
     </View>
         )

       }

      }

Answer 1

我已经用纯JavaScript创建了一个简短的代码段，展示了如何停止和重新启动间隔。

它还显示了如何使用一个计数器来计算分钟和秒。

抱歉，但是我还没有在React中实现它！您仍然必须在React模板中实现这一点，但是setInterval逻辑和秒计数器应该工作相同。

let id;
let paused = true;
let seconds = 0;
let btn = document.querySelector("#btn");

btn.addEventListener("click", ()=>{
  toggleTimer();
});

function startTimer(){
  id = setInterval(()=>{
    seconds++;
    let minutes = Math.floor(seconds/60);
    let sec = seconds%60;
    console.log(minutes + " : " + sec);
  }, 100);
}

function stopTimer(){
  clearInterval(id);
}

function toggleTimer(){
  console.log(paused);
  if(paused){
    paused = false;
    startTimer();
  } else {
    paused = true;
    stopTimer();
  }
}

如何在此计时器中添加暂停功能？ React-Native

1 个答案: