Я хочу добавить таймер в свое приложение, которое построено с использованием реакции native.
Я просмотрел ссылку в timer mixin в документации, однако я построил остальную часть приложения, используя es6, t быть совместимым.
Я попробовал следующее.
В моем основном классе у меня есть функция с именем getTimerCountDown
getTimerCountDown() {
setTimeout(() => {
this.setTimeRemaining(this.getTimeRem()-1);
}, 1000);
}
getTimeRem() {
return this.state.timeRemaining;
}
Я пробовал называть это в componentDidUpdate
, как показано ниже. Это работает так, как я хочу, если я не буду делать никаких других взаимодействий с пользовательским интерфейсом.
Если я это сделаю (например, у меня есть кнопка, которую я могу щелкнуть по представлению.), так как `componentDidUpdate снова вызван, коня становится очень быстрым (так как его набирают так называемое x количество раз)
componentDidUpdate(){
this.getTimerCountDown();
}
Я не уверен, полностью ли я нахожусь на неправильном пути или небольшое изменение в том, что я сделал, чтобы получить то, что я хочу. Каков наилучший способ заставить таймер обратного отсчета работать в реакции native с помощью es6?
Таймер на главной странице
<Timer timeRem={this.getTimeRem()} />
возвращает
render(){
return (
<View style={styles.container}>
<Text> This is the Timer : {this.props.setTimer} - {this.props.timeRem} </Text>
</View>
)
}
Я не уверен, как это будет работать даже без каких-либо других взаимодействий пользовательского интерфейса. componentDidUpdate
вызывается каждый раз, когда компонент повторно отображается, что-то, что происходит, когда внутреннее состояние или переданные реквизиты изменились. Не то, что вы можете рассчитывать, чтобы происходить ровно каждую секунду.
Как насчет перемещения getTimerCountDown
к вашему методу componentDidMount
(который вызывается только один раз), а затем с помощью setInterval
вместо setTimeout
, чтобы убедиться, что счетчик постоянно уменьшается?
clearInterval
как обычно. Это отвечает на ваш вопрос?
Поздно, но вы можете попробовать этот компонент, который я сделал для работы с таймерами и компонентами es6 в native-native:
https://github.com/fractaltech/react-native-timer
Идея проста, сохранение и очистка переменных таймера на компонентах - это боль, поэтому просто поддерживайте их в отдельном модуле. Пример:
// 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);
setState()
TimerMixin
не совместима? Документы для этого даже используют пример es6