créer un timer avec react native en utilisant es6
je cherche à ajouter une minuterie à mon application qui est construite en utilisant react native.
j'ai regardé le lien de l' timer mixin dans la documentation cependant j'ai construit le reste de l'application en utilisant es6 donc ce ne sera pas compatible.
j'ai essayé le dessous.
Dans ma classe Principale, j'ai une fonction appelée getTimerCountDown
getTimerCountDown() {
setTimeout(() => {
this.setTimeRemaining(this.getTimeRem()-1);
}, 1000);
}
getTimeRem() {
return this.state.timeRemaining;
}
j'ai essayé d'appeler ce dans componentDidUpdate comme indiqué ci-dessous. Cela fonctionne comme je le veux, si je ne fais pas toute autre interaction avec l'INTERFACE utilisateur.
Si je fais (par exemple: j'ai un bouton, je peux cliquer sur la vue.) comme ' componentDidUpdate est appelé à nouveau, le conunter devient très rapide (puisqu'il est appelé x nombre de fois)
componentDidUpdate(){
this.getTimerCountDown();
}
Je ne suis pas sûr d'être sur la bonne voie ici ou un petit changement à ce que j'ai fait peut m'obtenir ce que je veux. Quelle est la meilleure façon de faire fonctionner un compte à rebours dans react native en utilisant es6?
Classe Timer sur principal page
<Timer timeRem={this.getTimeRem()} />
retourne
render(){
return (
<View style={styles.container}>
<Text> This is the Timer : {this.props.setTimer} - {this.props.timeRem} </Text>
</View>
)
}
3 réponses
Je ne suis pas vraiment sûr de savoir comment cela fonctionnerait même en l'absence d'autres interactions avec L'interface utilisateur. componentDidUpdate est appelé chaque fois que le composant est rendu à nouveau, ce qui se produit lorsque l'état interne ou les accessoires transmis ont changé. On ne peut pas compter sur quelque chose qui arrive à chaque seconde.
Que Diriez-vous de déplacer le getTimerCountDown pour votre componentDidMount méthode (qui n'est appelée qu'une fois), et ensuite en utilisant setInterval au lieu de setTimeout pour vérifier que le compteur est décrémenté en continu?
un peu tard, mais vous pouvez essayer ce composant que j'ai fait pour traiter les timers et les composants es6 dans react-native:
https://github.com/fractaltech/react-native-timer
L'idée est simple, maintenir et effacer les variables de minuterie sur les composants est une douleur, donc simplement, les maintenir dans un module séparé. Exemple:
// 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);
Essayez ceci
minuterie.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 />)
);
}