React Native 后台计时器永不停止答案

【问题标题】：React Native background timer never stopsReact Native 后台计时器永不停止
【发布时间】：2019-02-22 18:31:56
【问题描述】：

我正在构建一个应用程序，该应用程序有一个计时器，可以在计时器处于活动状态时请求地理定位。对于计时器，我使用react-native-background-timer。这有点工作，但不完全符合我的要求。

有了这段代码：

BackgroundTimer.runBackgroundTimer(() => { 
    console.log('tic');
},  
1000);

当应用程序处于后台时，计时器将停止。使用这段代码：

const intervalId = BackgroundTimer.setInterval(() => {
    console.log('tic');
}, 1000);

即使在后台它也会不断运行，但我无法阻止它。当我运行BackgroundTimer.clearInterval(intervalId); 时，计时器仍在运行。即使当我离开屏幕并返回主屏幕时，计时器仍会滴答作响并且永不停止。这并不理想，因为我需要计时器运行几分钟然后停止。

我将计时器设置为 1 秒以更新屏幕上剩余的时间。我正在考虑设置一次 6 分钟的计时器，但是如何每秒更新一次状态？为此制作 2 个计时器感觉是一种糟糕的做法，即使它会起作用。

所以为了更清楚，用户假设从事某些活动，例如步行几分钟。因此，当用户接听电话或打开音乐应用程序以切换音乐或其他内容时，我不能让计时器停止。计时器仍然需要运行，我需要通过地理位置测量步数和距离。即使用户打开另一个应用程序，忘记了我的应用程序，它也需要完美地工作，它仍然会运行剩余的时间，然后记录到数据库并停止。

【问题讨论】：

标签： javascript react-native timer

【解决方案1】：

试试下面的代码sn-p，适用于安卓和ios

import { DeviceEventEmitter, NativeAppEventEmitter, Platform } from 'react-native';
import _BackgroundTimer from 'react-native-background-timer';

const EventEmitter = Platform.select({
    ios: () => NativeAppEventEmitter,
    android: () => DeviceEventEmitter,
})();

class BackgroundTimer {
    static setInterval(callback, delay) {
        _BackgroundTimer.start();
        this.backgroundListener = EventEmitter.addListener("backgroundTimer", () => {
            this.backgroundTimer = _BackgroundTimer.setInterval(callback, delay);
        });
        return this.backgroundListener;
    }

    static clearInterval(timer) {
        if (timer) timer.remove();
        if (this.backgroundTimer)
            _BackgroundTimer.clearInterval(this.backgroundTimer);
        _BackgroundTimer.stop();
    }
}

export default BackgroundTimer;

用法

const timer = BackgroundTimer.setInterval(callback, 1000);
BackgroundTimer.clearInterval(timer)

【讨论】：

您已经很好地设置了代码，但我仍然很困惑，当您从插件导入 _BackgroundTimer 时，Usage 中的 BackgroundTimer 是什么？
你用过_BackgroundTimer.setInterval@KirankumarDafda吗？
是的，我正在使用，但是当应用程序在后台时它不工作但在前台时工作正常
这就是我在阅读文档github.com/ocetnik/react-native-background-timer#usage-ios 之后发生的事情。我使用了start，stop 方法并触发了backgroundTimer，它在_BackgroundTimer 中实现，它就像一个魅力，应用程序在后台当应用程序在前台时，你不需要实现上述解决方案，setInterval & clearInterval api 将为您完成这项工作
您现在使用的是哪个版本？我的实施要点gist.github.com/vemarav/2cf978e5bde669f7d69ce20e30c11bc3

【解决方案2】：

由于某种原因，我在使用@Aravind Vemula 的答案时遇到了以下错误。调用BackgroundTimer.clearInterval(timer);时出现如下错误：

timer.remove 不是函数

这就是我稍微修改代码的原因。

// parameter removed
static clearInterval() {
    // ADD this if statement 
    if (this.backgroundListener){ 
        this.backgroundListener.remove();
    }
    if (this.backgroundTimer)
        _BackgroundTimer.clearInterval(this.backgroundTimer);
    _BackgroundTimer.stop();
}

上面的代码检查是否注册了后台监听器。如果是，它会删除所有侦听器，尤其是我们的 backgroundTimer。

用法：

BackgroundTimer.clearInterval(); // removed parameter

更改后，iOS 14.3 上一切正常。

【讨论】：

【解决方案3】：

@Aravind Vemula 的答案工作正常。但是，如果用户从后台打开应用程序并且在后台处理程序中添加了计时器代码，那么当您停止计时器时，它就不起作用了。因此，您需要在这两种方法中进行以下更改。

static setInterval(callback, delay) {
    if (!this.backgroundListener && !this.locationTimer) {
      _BackgroundTimer.start();
      this.backgroundListener = EventEmitter.addListener('backgroundTimer', () => {
        this.locationTimer = _BackgroundTimer.setInterval(callback, delay);
      });
      return this.locationTimer;
    }
  }

  static clearInterval() {
    if (this.backgroundListener) {
      this.backgroundListener.remove();
    }
    if (this.locationTimer) {
      _BackgroundTimer.clearInterval(this.locationTimer);
    }
    this.backgroundListener = false;
    this.locationTimer = false;
    _BackgroundTimer.stop();
    _BackgroundTimer.start();
  }

【讨论】：