Ich möchte meiner App einen Timer hinzufügen, der mit React Native erstellt wurde.

Ich habe mir den Link zum Timer-Mixin in der Dokumentation angesehen Ich habe jedoch den Rest der App mit es6 erstellt, sodass dies nicht kompatibel ist.

Ich habe das Folgende versucht.

In meiner Hauptklasse habe ich eine Funktion namens getTimerCountDown

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

getTimeRem() {
    return this.state.timeRemaining;
}

Ich habe versucht, dies in componentDidUpdate aufzurufen, wie unten gezeigt. Dies funktioniert so, wie ich es möchte, wenn ich keine anderen Interaktionen mit der Benutzeroberfläche durchführe.

Wenn ich dies tue (z. B. wenn ich eine Schaltfläche habe, auf die ich klicken kann), wenn `componentDidUpdate erneut aufgerufen wird, wird der Conunter sehr schnell (da er x-mal aufgerufen wird).

componentDidUpdate(){
    this.getTimerCountDown();
}

Ich bin mir nicht sicher, ob ich hier völlig auf dem falschen Weg bin oder ob eine kleine Änderung an dem, was ich getan habe, mir das bringen kann, was ich will. Was ist der beste Weg, um einen Countdown-Timer in React Native mit es6 zum Laufen zu bringen?

Timer-Klasse auf der Hauptseite

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

Kehrt zurück

render(){
    return (
        <View style={styles.container}>
            <Text> This is the Timer : {this.props.setTimer}  - {this.props.timeRem} </Text>
        </View>
    )
}
11
ak85 12 Aug. 2015 im 14:23

3 Antworten

Beste Antwort

Ich bin mir nicht sicher, wie das auch ohne andere UI-Interaktionen funktionieren würde. componentDidUpdate wird jedes Mal aufgerufen, wenn die Komponente neu gerendert wird. Dies geschieht, wenn sich der interne Status oder die weitergegebenen Requisiten geändert haben. Sie können sich nicht darauf verlassen, dass genau jede Sekunde etwas passiert.

Wie wäre es, wenn Sie getTimerCountDown in Ihre componentDidMount -Methode verschieben (die nur einmal aufgerufen wird) und dann setInterval anstelle von setTimeout verwenden, um sicherzustellen, dass der Zähler kontinuierlich dekrementiert wird?

5
tkers 13 Aug. 2015 im 08:17

Ein bisschen spät, aber Sie können diese Komponente ausprobieren, die ich für den Umgang mit Timern und es6-Komponenten in React-Native erstellt habe:

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

Die Idee ist einfach: Das Verwalten und Löschen von Timer-Variablen für die Komponenten ist mühsam. Verwalten Sie sie daher einfach in einem separaten Modul. Beispiel:

// 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);
4
kapv89 22 März 2016 im 20:32

Versuche dies

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 />)
   );
 }
2
Akash sharma 2 Aug. 2018 im 11:51