如何在React Native中使用Headless js创建后台任务

Question

当遵循此处的文档https://reactnative.dev/docs/headless-js-android并尝试创建一个简单的后台任务时，一切似乎都正常工作（编译和构建都很好），当我尝试启动服务我收到此错误：

(NOBRIDGE) ERROR  Error: Failed to call into JavaScript module method AppRegistry.startHeadlessTask(). Module has not been registered as callable. Registered callable JavaScript modules (n = 8): GlobalPerformanceLogger, RCTNativeAppEventEmitter, SamplingProfiler, RCTDeviceEventEmitter, HMRClient, RCTLog, HeapCapture, Systrace. Did you forget to call `registerCallableModule`?

我已经尝试了多次，但我总是遇到这个问题，当我试图用谷歌搜索这个错误时我找不到任何东西，而ChatGPT也建议胡说八道。

这是我的设置：

android/app/src/main/java/com/mycompany/MyTaskService.kt

package com.mycompany;

import android.content.Intent
import com.facebook.react.HeadlessJsTaskService
import com.facebook.react.bridge.Arguments
import com.facebook.react.jstasks.HeadlessJsTaskConfig

class MyTaskService : HeadlessJsTaskService() {
    override fun getTaskConfig(intent: Intent): HeadlessJsTaskConfig? {
        return intent.extras?.let {
            HeadlessJsTaskConfig(
                "MyTaskService",
                Arguments.fromBundle(it),
                5000, // timeout for the task
                true // optional: defines whether or not the task is allowed in foreground.
                // Default is false
            )
        }
    }
}

android/app/src/main/java/com/mycompany/MainActivity.kt

package com.mycompany

import android.content.Intent // Import for Intent
import android.os.Bundle // Import for Bundle
import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import com.mycompany.MyTaskService

class MainActivity : ReactActivity() {
    override fun getMainComponentName(): String = "MyCompany"

    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

    override fun onStart() {
        super.onStart()

        val service = Intent(applicationContext, MyTaskService::class.java)
        val bundle = Bundle()

        bundle.putString("foo", "bar")

        service.putExtras(bundle)

        applicationContext.startForegroundService(service)
    }
}

（请注意，这里尝试在应用程序使用 OnStart 启动时启动服务，我也尝试使用按钮或在应用程序最小化时启动它，但我总是遇到相同的错误）

然后，在 React Native 端，

app.tsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
    AppRegistry,
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    useColorScheme,
    View,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
const STRAPI_URL = '...';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
import {HomeScreen} from "./src/HomeScreen.tsx";
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import {AboutScreen} from "./src/AboutScreen.tsx";
import DestinationsScreen from "./src/DestinationsScreen.tsx";
import ContactScreen from "./src/ContactScreen.tsx";
import JourneyScreen from "./src/JourneyScreen.tsx";

const Stack = createNativeStackNavigator();

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
      <NavigationContainer>
          <Stack.Navigator screenOptions={{headerShown: false}} initialRouteName="Home">
              ...
          </Stack.Navigator>
      </NavigationContainer>
  );
}

const styles = StyleSheet.create({
 ...
});

export default App;

const testTask = () => async () => {
    console.log('Background task test')
};

AppRegistry.registerComponent("MyCompany", () => App);
AppRegistry.registerHeadlessTask('MyTaskService', testTask);

每次，无论何时尝试启动服务，我都会收到上面提到的错误（也在屏幕截图中）

请注意，我将前台允许设置为true，这样我就可以在主应用程序运行时启动服务。

我也已将其添加到我的清单中

<service android:name="com.mycompany.MyTaskService" />

Answer 1

回答我自己的问题，以防将来有人遇到这个问题，问题似乎是React Native的新架构。

暂时（

RN: 0.76.0

）似乎你必须通过将其添加到你的grandle.properties来禁用它

newArchEnabled=false