Как добавить функцию паузы в этот таймер?Реагировать-Native - PullRequest
Новая
       10

Как добавить функцию паузы в этот таймер?Реагировать-Native

0 голосов
/ 02 декабря 2018

// Импорт разных файлов 

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
    })
 }

// Таймер 2 для уменьшения секунд на 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
 )
 }

// ПРОСТО очищать INterval, если он становится ниже 

 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>
         )

       }

      }

1 Ответ

0 голосов
/ 03 декабря 2018

Я создал короткий фрагмент в чистом 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();
  }
}
...