时间戳

首页 > 解决方案 > React Native 后台计时器永不停止

javascript - React Native 后台计时器永不停止

问题描述

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

使用这段代码：

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

当应用程序在后台时，计时器正在停止。虽然使用这段代码：

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

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

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

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

标签： javascriptreact-nativetimer

解决方案

尝试以下代码片段，适用于 android 和 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)

推荐阅读