setInterval в react-native

Question

У меня есть главный компонент App, который возвращает приложение полностью

<Provider>
  <RootNavigator />
</Provider>

Каким образом на всё приложение наложить setInterval? Условно через каждые 60 секунд выводится console.log()

Answer 1

Простой пример, добавьте в главный компонент App следующий код:

constructor(props) {
  super(props);

  // В этой переменной будем хранить ID возвращенное из `setInterval`
  this.timerId = null; 

  // Some code here... 
}

componentDidMount() {
  // повторить с интервалом 60 секунд (60 sec = 60000 ms)
  this.timerId = setInterval(() => console.log('tick'), 60000);
}

componentWillUnmount() {
  // Если ранее был запущен `setInterval` - остановим его (отменим выполнение)
  if (this.timerId) {
    clearInterval(this.timerId);
  }
}

Конструктор (constructor) компонента React вызывается до того, как компонент будет примонтирован. Поэтому в конструкторе создаем переменную, в которой будем хранить ID возвращенное из setInterval. Метод componentDidMount вызывается сразу после монтирования, поэтому в методе componentDidMount запускаем повтор выполнения кода с интервалом 60 секунд. Метод componentWillUnmount вызывается непосредственно перед размонтированием и удалением компонента, поэтому в методе componentWillUnmount останавливаем повтор, если он был ранее запущен.

Полезные ссылки:

Пример на React (методы жизненного цикла у native те же, поэтому как пример - подойдет):

class App extends React.Component {
  constructor(props) {
    super(props);
    
    // В этой переменной будем хранить ID возвращенное из `setInterval`
    this.timerId = null; 
  }
  
  componentDidMount() {
    // повторить с интервалом 5 секунд (5 sec = 5000 ms)
    this.timerId = setInterval(() => console.log('tick'), 5000);
  }

  componentWillUnmount() {
    // Если ранее был запущен `setInterval` - остановим его (отменим выполнение)
    if (this.timerId) {
      clearInterval(timerId);
    }
  }

  render() {
    return (
      <h1>
        I am a general component!
      </h1>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

БЛОГ НА HUSL

setInterval в react-native

Ответы (1 шт):