erstellen Sie timer mit react native Verwendung von es6

Ich bin auf der Suche hinzufügen, einen timer, um meine app, die aufgebaut ist mit react native.

Ich habe mir den link zu der timer-mixin in der Dokumentation allerdings habe ich gebaut, der rest der app mit es6 so wird dies nicht kompatibel.

Ich habe versucht die unten.

In meiner Main-Klasse habe ich eine Funktion namens getTimerCountDown

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

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

Habe ich versucht, Sie anzurufen, diese in componentDidUpdate wie unten gezeigt. Dies funktioniert wie ich es will, wenn ich das nicht machen, alle anderen Interaktionen mit der Benutzeroberfläche.

Wenn ich (z.B. ich habe einen button, den ich klicken kann, auf der Ansicht.) als " componentDidUpdate aufgerufen wird, wird wieder die conunter bekommt wirklich schnell (wie es immer genannt x mal)

componentDidUpdate(){
    this.getTimerCountDown();
}

Ich bin nicht sicher, ob ich bin komplett auf dem Holzweg hier oder eine kleine änderung was ich gemacht habe, können mir, was ich will.
Was ist der beste Weg, um einen countdown-timer arbeiten, reagieren die einheimischen mit es6?

Timer-Klasse
auf der main Seite

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

gibt

render(){
    return (
        <View style={styles.container}>
            <Text> This is the Timer : {this.props.setTimer}  - {this.props.timeRem} </Text>
        </View>
    )
}
  • versuchen Sie, ändern Sie Ihre getTimerCountdown und machen es zurück setState()
  • Was Teil der TimerMixin ist nicht kompatibel? Die docs für die es sogar ein es6 Beispiel
InformationsquelleAutor ak85 | 2015-08-12
  1. 5

    Ich bin mir nicht wirklich sicher, wie das funktionieren würde, auch ohne jede andere UI-Interaktionen. componentDidUpdate wird jedesmal aufgerufen, wenn die Komponente neu gerendert, was passiert, wenn der innere Zustand oder weitergegeben Requisiten haben sich geändert. Nicht etwas, das Sie zählen können, zu passieren, genau jede Sekunde.

    Wie über das verschieben der getTimerCountDown zu Ihrem componentDidMount Methode (die nur einmal aufgerufen) und dann mit setInterval statt setTimeout um sicherzustellen, dass der Zähler wird dekrementiert kontinuierlich?

    • Dieser Vorschlag funktionierte Dank. wie würden Sie clearInterval in dem Zusammenhang habe ich die getTimerCountDown Funktion? Ich bin nicht sicher, wie würde ich dies tun, da man zugewiesen var, wie es allgemein ist?
    • Sie würden speichern der Referenz des Timers entweder die Komponente des Zustands oder eine member-variable der Komponente (nicht 100%, wenn die letztere gilt als schlechte Praxis, wenn Sie nicht brauchen, dass der Verweis auf das Rendern der Komponente mindestens). Dann wenn Sie benötigen, um den timer zu stoppen, die Sie übergeben können, die einen Verweis in clearInterval wie gewohnt. Nicht, dass die Antwort auf Ihre Frage?
    • ja, das war es, was ich war nach, danke.
    • Sie meinen Tag gerettet. Gut erklären, danke.
    InformationsquelleAutor tkers
  2. 4

    Ein bisschen spät, aber können Sie versuchen, diese Komponente habe ich für den Umgang mit Timern und es6 Komponenten reagieren-native:

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

    Idee ist einfach, die Pflege und die clearing-timer-Variablen auf die Komponenten ist ein Schmerz, so einfach, behalten Sie Sie in ein separates 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);
    InformationsquelleAutor kapv89
  3. 1

    Versuchen, diese

    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 />)
   );
 }
    • Gute Arbeit!Hat Super Funktioniert!!
    InformationsquelleAutor Akash sharma
Schreibe einen Kommentar