2015-08-12 35 views
7

Sto cercando di aggiungere un timer alla mia app che è stata creata utilizzando react native.crea timer con react native utilizzando es6

Ho visto il collegamento allo timer mixin nella documentazione, tuttavia ho creato il resto dell'app utilizzando es6, quindi non sarà compatibile.

Ho provato il seguito.

Nella mia classe principale che ho una funzione chiamata getTimerCountDown

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

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

Ho provato a chiamare questo componentDidUpdate come illustrato di seguito. Funziona come voglio io se non faccio altre interazioni con l'interfaccia utente.

Se faccio (ad esempio, ho un tasto che posso cliccare sulla vista.) Come `componentDidUpdate viene chiamato di nuovo il conunter diventa veramente veloce (come si è sempre chiamato x numero di volte)

componentDidUpdate(){ 
    this.getTimerCountDown(); 
} 

Non sono sicuro se sono completamente sulla strada sbagliata qui o un piccolo cambiamento di quello che ho fatto può ottenere quello che voglio. Qual è il modo migliore per far funzionare un timer per il conto alla rovescia in modalità nativa utilizzando es6?

Timer Classe a pagina principale

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

rendimenti

render(){ 
    return (
     <View style={styles.container}> 
      <Text> This is the Timer : {this.props.setTimer} - {this.props.timeRem} </Text> 
     </View> 
    ) 
} 
+0

tenta di modificare la getTimerCountdown e farla tornare 'setState()' –

+0

Quale parte del 'TimerMixin' non è compatibile? I documenti per usare anche un esempio es6 –

risposta

3

Io non sono davvero sicuro di come dovrebbe funzionare anche senza altre interazioni dell'interfaccia utente. componentDidUpdate viene chiamato ogni volta che il componente viene rieseguito, qualcosa che accade quando lo stato interno o gli oggetti di scena tramandati sono cambiati. Non è qualcosa su cui puoi contare per accadere esattamente ogni secondo.

ne dite di spostare il getTimerCountDown al componentDidMount metodo (che viene chiamato una sola volta), e quindi utilizzando setInterval invece di setTimeout per assicurarsi che il contatore viene decrementato continuamente?

+0

Questo suggerimento ha funzionato grazie. come cancellerestiInterval nel contesto che ho impostato la funzione getTimerCountDown? Non sono sicuro di come lo farei in quanto assegnato a un var come lo è comunemente? – ak85

+1

Memorizzerai il riferimento del timer nello stato del componente o in una variabile membro del componente (non al 100% se quest'ultimo è considerato una cattiva pratica - se non hai bisogno di quel riferimento per rendere il componente almeno). Poi ogni volta che hai bisogno di fermare il timer puoi passare quel riferimento in 'clearInterval' come al solito. Questo risponde alla tua domanda? – Lapixx

+0

sì, questo era quello che stavo cercando grazie. – ak85

4

Kinda in ritardo, ma si può provare questa componente che ho fatto per trattare con timer e componenti ES6 a reagire-native:

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

idea è semplice, il mantenimento e la cancellazione variabili timer sui componenti è un dolore, così semplicemente, mantenerli in un modulo separato. Esempio:

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