Обновление темы на закате в приложении React Native

Question

У нас есть приложение с дневным и ночным режимами.Переход между режимами - это простой логический переключатель.То, что мы хотели бы сделать, - это иметь режимы автоматического переключения на закате дня и ночи.

В настоящее время этот переключатель происходит в componentWillReceiveProps нашего корневого контейнера.Я не люблю этот подход, так как он срабатывает только тогда, когда происходит рендеринг.Я думал о том, чтобы настроить простой цикл interval для проверки текущего времени каждые несколько минут или около того, но у нас уже есть пара интервалов, выполняющихся повсюду, и в приложении React Native я не уверен, насколько многократным, непрерывным является непрерывныйопросы вроде этого были бы.

Можно ли использовать здесь интервал или может быть лучший способ для отслеживания времени?

Answer 1

Вам не нужно беспокоиться о влиянии на производительность установки таймера.Я не уверен насчет RN, но в браузерах Javascript обычно все равно получает свой поток.

Вам нужно беспокоиться не о том, чтобы устанавливать слишком короткие интервалы (поскольку все, что будет вызывать таймер, сам по себе является синхронным), ни слишком длинные (> 1 мин), как на длинных таймерах Android сохраняют времямодуль проснулся .Самое главное, вам нужно убедиться, что таймер очищен при размонтировании - см. https://facebook.github.io/react-native/docs/timers.

Answer 2

Вы можете использовать response-native-background-timer для периодической отправки событий, даже когда приложение находится в фоновом режиме.

const getCurrentMode = () => {
    let mode
    const afternoon = 12
    const evening = 17
    const currentHour = moment().format("HH")

    if(currentHour >= afternoon && currentHour <= evening) {
        mode = "afternoon";
    } else if(currentHour >= evening) {
        mode = "evening";
    } else {
        mode = "morning";
    }
    return mode
}

import BackgroundTimer from 'react-native-background-timer';
import moment from 'moment'

componentDidMount() {
  BackgroundTimer.setInterval(() => {
    const currentMode = getCurrentMode()
    if(currentMode !== this.state.currentMode) {
       this.setState({currentMode})
    }
  }, 200); // ... Set the delay here in ms
}

componentWillUnmount() {
  BackgroundTimer.clearInterval(intervalId);
}