React Native应用退至后台30秒后调用API失败求助

我希望在React Native应用退至后台30秒后调用API，目前用AppState能监听到应用进入后台的回调，但setTimeout()无法在30秒后触发回调。尝试的代码如下：

useEffect(() => {
    let backgroundTimer;
    const handleAppStateChange = (nextAppState) => {
        if (nextAppState === 'background') {console.log("your app goes to the background")
            backgroundTimer = setTimeout(() => {
                fetch('https://jsonplaceholder.typicode.com/todos/1')
                    .then(response => response.json())
                    .then(data => console.log('API Response:', data))
                    .catch(error => console.error('API Error:', error));
            }, 30000);
        } else {
            clearTimeout(backgroundTimer);
        }
    };
    AppState.addEventListener('change', handleAppStateChange);
    return () => {
        AppState.removeEventListener('change', handleAppStateChange);
        clearTimeout(backgroundTimer);
    };
}, []);

问题根源 #

React Native的JS线程在应用进入后台后会被iOS/Android系统挂起，普通的setTimeout会被暂停，无法按时执行定时任务。

解决方法 #

使用专门处理后台定时任务的第三方库react-native-background-timer，它能绕过系统的挂起机制，在后台保持定时任务运行。

步骤1：安装依赖 #

npm install react-native-background-timer --save
# 或使用yarn
yarn add react-native-background-timer

（React Native 0.60及以上版本会自动完成链接，无需额外操作）

步骤2：修改代码 #

替换普通setTimeout为后台定时器，同时确保在合适时机清除定时器：

import React, { useEffect } from 'react';
import { AppState } from 'react-native';
import BackgroundTimer from 'react-native-background-timer';

const YourComponent = () => {
  let backgroundTimer;

  useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      if (nextAppState === 'background') {
        console.log("应用进入后台");
        // 使用后台定时器替代普通setTimeout
        backgroundTimer = BackgroundTimer.setTimeout(() => {
          fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => response.json())
            .then(data => console.log('API响应:', data))
            .catch(error => console.error('API错误:', error));
        }, 30000);
      } else {
        // 应用回到前台时清除定时器
        if (backgroundTimer) {
          BackgroundTimer.clearTimeout(backgroundTimer);
        }
      }
    };

    AppState.addEventListener('change', handleAppStateChange);

    // 组件卸载时清理监听和定时器
    return () => {
      AppState.removeEventListener('change', handleAppStateChange);
      if (backgroundTimer) {
        BackgroundTimer.clearTimeout(backgroundTimer);
      }
    };
  }, []);

  // 这里写你的组件内容
  return null;
};

export default YourComponent;

注意事项 #

• iOS端：如果遇到定时任务仍不执行的情况，可在Info.plist中添加后台模式权限，比如添加UIBackgroundModes数组，包含fetch或processing字段。
• Android端：该库利用系统AlarmManager实现后台定时，无需额外权限，但部分手机的电池优化可能会拦截任务，建议引导用户关闭对应应用的电池优化。
• 务必在应用回到前台或组件卸载时清除定时器，避免内存泄漏和不必要的API调用。

内容的提问来源于stack exchange，提问作者React_Coder