React Native中react-native-background-fetch无头任务Hook调用报错求助

我开发React Native应用时，需要实现后台或关闭状态下保存位置的功能，使用了react-native-background-fetch库，开启enableHeadless启用Headless JS机制处理应用终止后的事件。但在index.js中注册Headless任务并调用CommonContext中的saveLocationInContext函数时，触发了Invalid hook call错误，具体代码和报错信息如下：

代码部分 #

index.js #

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

import {Amplify} from 'aws-amplify';
import amplifyconfig from './src/amplifyconfiguration.json';
Amplify.configure(amplifyconfig);

import BackgroundFetch from 'react-native-background-fetch';

import {saveLocationInContext} from './src/context/CommonContext';

let MyHeadlessTask = async event => {
  let taskId = event.taskId;
  let isTimeout = event.timeout;
  if (isTimeout) {
    console.log('[BackgroundFetch] Headless TIMEOUT:', taskId);
    BackgroundFetch.finish(taskId);
    return;
  }
  console.log('[BackgroundFetch HeadlessTask] start: ', taskId);

  const location = await saveLocationInContext('auto');
  console.log('[BackgroundFetch HeadlessTask] location: ', location);

  BackgroundFetch.finish(taskId);
};

BackgroundFetch.registerHeadlessTask(MyHeadlessTask);

AppRegistry.registerComponent(appName, () => App);

CommonContext.js #

...
const CommonContext = createContext({});

const CommonContextProvider = ({children}) => {
...
return (
    <CommonContext.Provider
      value={{
        requestLocationPermission,
        location,
        getLocation,
      }}>
      {children}
    </CommonContext.Provider>
  );
};

export const saveLocationInContext = async remark => {
  const {getLocation} = useCommonContext();
  const {dbUser} = useAuthContext();

  if (!dbUser) {
    console.error('No user information');
    return;
  }
  try {
    const location = await getLocation();
    const savedAttendance = await DataStore.save(
      new StaffAttandance({
        userId: dbUser.id,
        userName: dbUser.userName,
        latitude: location.latitude,
        longitude: location.longitude,
        remark: remark,
      }),
    );
    console.log('index.js', new Date());
    return location;
  } catch (err) {
    console.error('CommonContext saveLocation', err);
  }
};

export default CommonContextProvider;

export const useCommonContext = () => useContext(CommonContext);

报错信息 #

LOG  [BackgroundFetch HeadlessTask] start:  react-native-background-fetch
 ERROR  Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
 ERROR  [TypeError: Cannot read property 'useContext' of null]
 LOG  [BackgroundFetch] Headless TIMEOUT: react-native-background-fetch

问题原因 #

核心问题是React Hooks只能在函数组件的顶层或自定义Hook内部调用，而Headless JS任务运行在脱离React组件树的独立环境中，没有Context上下文，也不属于任何React组件。当saveLocationInContext函数在Headless任务中被调用时，它内部使用的useCommonContext和useAuthContext违反了Hooks的使用规则，直接触发错误。

解决方案 #

需要重构保存位置的逻辑，把依赖Context的部分抽离成不依赖React Hooks的纯JS工具函数：

1. 抽离独立的工具函数（修改CommonContext.js） #

import { Auth } from 'aws-amplify';
import { DataStore } from '@aws-amplify/datastore';
import { StaffAttandance, Staff } from './models'; // 根据你的模型路径调整

// 抽离独立的获取位置函数，复制原Context中getLocation的实现
export const getLocation = async () => {
  // 这里写原getLocation的逻辑，比如调用react-native-geolocation-service获取位置
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        resolve({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        });
      },
      (error) => reject(error),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  });
};

// 抽离独立的保存位置函数，不依赖任何Hooks
export const saveLocation = async remark => {
  try {
    // 直接从Amplify Auth获取当前用户
    const authUser = await Auth.currentAuthenticatedUser();
    if (!authUser) {
      console.error('No user information');
      return;
    }
    // 根据authUser的标识查询对应的Staff记录（根据你的业务逻辑调整）
    const dbUser = await DataStore.query(Staff, authUser.attributes.sub);
    if (!dbUser) {
      console.error('No staff record found for current user');
      return;
    }

    const location = await getLocation();
    await DataStore.save(
      new StaffAttandance({
        userId: dbUser.id,
        userName: dbUser.userName,
        latitude: location.latitude,
        longitude: location.longitude,
        remark: remark,
      }),
    );
    console.log('Saved location at:', new Date());
    return location;
  } catch (err) {
    console.error('Save location error:', err);
  }
};

2. 修改Headless任务调用新函数（修改index.js） #

// 替换导入的函数为新的saveLocation
import {saveLocation} from './src/context/CommonContext';

let MyHeadlessTask = async event => {
  let taskId = event.taskId;
  let isTimeout = event.timeout;
  if (isTimeout) {
    console.log('[BackgroundFetch] Headless TIMEOUT:', taskId);
    BackgroundFetch.finish(taskId);
    return;
  }
  console.log('[BackgroundFetch HeadlessTask] start: ', taskId);

  // 调用无Hook依赖的saveLocation
  const location = await saveLocation('auto');
  console.log('[BackgroundFetch HeadlessTask] location: ', location);

  BackgroundFetch.finish(taskId);
};

说明 #

Headless JS运行在没有React组件树的环境中，无法访问Context、Hooks等React特性，所有后台任务的逻辑必须是纯JavaScript实现，不依赖React的组件生命周期或状态管理上下文。

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