Очистить интервал, когда приложение находится в фоновом состоянии в React Native

Question

Я хотел бы знать, как очищать интервал всякий раз, когда мое приложение переходит в фоновое состояние.

Иногда, когда я нажимаю кнопку «Домой», мое приложение закрывается (событие willUnmount не запускается), а затем интервал никогда не очищается.

Answer 1

Как вы узнали, что интервал никогда не очищается, если приложение закрыто? (Просто любопытно) Если приложение закрывается, оно вообще не должно работать, не так ли? Только если у вас есть фоновый таймер, может быть, будет работать?

Но я думаю, что это должно быть остановлено, если вы закроете приложение? Я думаю, что в вашем случае, вы можете использовать AppState из реактивной системы, чтобы определить, вернулось ли приложение на передний план, а затем сбросить интервал?

import React, {
  Component
} from "react";
import {
  AppState,
  StyleSheet,
  Text,
  View
} from "react-native";

export default class AppStateExample extends Component {
  state = {
    appState: AppState.currentState
  };

  componentDidMount() {
    AppState.addEventListener("change", this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener("change", this._handleAppStateChange);
  }

  _handleAppStateChange = nextAppState => {
    if (
      this.state.appState.match(/inactive|background/) &&
      nextAppState === "active"
    ) {
      console.log("App has come to the foreground!"); //reset interval here
    }
    this.setState({
      appState: nextAppState
    });
  };

  render() {
    return ( 
    <View style = {
        styles.container
      } >
      <Text>
      Current state is: {
        this.state.appState
      }</Text> 
    </View >
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});