créer de la minuterie à réagir natif à l'aide de es6
Je suis à la recherche d'ajouter un timer pour mon application qui est construit à l'aide de réagir natif.
J'ai regardé le lien vers le minuterie mixin dans la documentation mais je n'ai bâti le reste de l'application à l'aide es6 alors ce ne sera pas compatible.
J'ai essayé de le ci-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 d'autres interactions avec l'INTERFACE utilisateur.
Si je n' (par exemple: j'ai un bouton, je peux cliquer sur la vue.) comme " componentDidUpdate est appelé de nouveau la conunter devient vraiment rapide (comme il est appelé un nombre x de fois)
componentDidUpdate(){
this.getTimerCountDown();
}
Je ne suis pas sûr si je suis complètement sur la mauvaise voie ou dans un petit changement pour ce que j'ai fait peut me faire ce que je veux.
Quelle est la meilleure façon d'obtenir un compte à rebours de travail à réagir natif à l'aide de es6?
Classe Timer
sur la page principale
<Timer timeRem={this.getTimeRem()} />
retourne
render(){
return (
<View style={styles.container}>
<Text> This is the Timer : {this.props.setTimer} - {this.props.timeRem} </Text>
</View>
)
}
setState()
Quelle est la partie de la
TimerMixin
n'est pas compatible? Les docs pour cela même que l'utilisation d'un es6 exempleOriginalL'auteur ak85 | 2015-08-12
Vous devez vous connecter pour publier un commentaire.
Je ne suis pas vraiment sûr de savoir comment ce serait encore sans aucune autre INTERFACE interactions.
componentDidUpdate
est appelée à chaque fois que le composant est un nouveau rendu, quelque chose qui arrive lorsque l'état interne ou transmise par l'un des accessoires ont changé. Pas quelque chose que vous pouvez compter pour arriver exactement à chaque seconde.Comment sur le déplacement de la
getTimerCountDown
à votrecomponentDidMount
méthode (qui n'est appelée qu'une seule fois), puis à l'aide desetInterval
au lieu desetTimeout
assurez-vous que le compteur est décrémenté en continu?Vous vous souhaitez stocker la référence de la minuterie soit l'état du composant ou d'un membre de la variable de la composante (pas à 100% si ce dernier est considéré comme une mauvaise pratique - si vous n'avez pas besoin que la référence à rendre le composant au moins). Alors à chaque fois que vous devez à l'arrêt de la minuterie, vous pouvez passer cette référence dans
clearInterval
comme d'habitude. Ne fait que répondre à votre question?oui, c'était ce que je recherchais merci.
Vous avez sauvé ma journée. Bien expliquer, merci.
OriginalL'auteur Lapixx
Un peu en retard, mais vous pouvez essayer ce composant que j'ai fait pour traiter avec des minuteries et es6 composants réagissent-natif:
https://github.com/fractaltech/react-native-timer
Idée est simple, le maintien et la compensation de la minuterie variables sur les composants est une douleur, alors tout simplement, de les maintenir dans un module séparé. Exemple:
OriginalL'auteur kapv89
Essayer cette
Timer.js
App.js
OriginalL'auteur Akash sharma