React Native 博览会项目的 TaskManager 和 BackgroundFetch 的位置？

问题描述

在我的 react native expo 项目中，我正在使用 TaskManager 实现 BackgroundFetch。 然而，在文档中，我只看到了如何在 App.js 文件中实现代码的示例。但是，我想将此代码委托给外部脚本文件，以便拥有更好的代码结构。不渲染任何内容的脚本文件。 此外，我想将此代码与 expo Notifications 结合使用以在应用程序不在前台时推送通知。

应用结构：

-App
--expo 
--.vscode
--assets
--node_modules
--src
---assets
---components
---constants
---navigation
---redux
---screens
--App.js
--app.json 
--package.json

我的 App.js

import React,{ useEffect } from 'react';
import { StyleSheet } from 'react-native';
import MainStackNavigator from './src/navigation/AppNavigator';
import { Provider as StateProvider } from 'react-redux';
import * as BackgroundFetch from 'expo-background-fetch';
import * as TaskManager from 'expo-task-manager';
import store from './src/redux/store';
//import index from './src/index';

BackgroundFetch.setMinimumIntervalAsync(60);
const taskName = 'test-background-fetch';
TaskManager.defineTask(taskName,async () => {
  console.log('background fetch running');
  return BackgroundFetch.Result.NewData;
});
console.log('task defined');

export default class App extends React.Component {
  componentDidMount() {
    this.registerTaskAsync();
  }

  registerTaskAsync = async () => {
    await BackgroundFetch.registerTaskAsync(taskName);
    console.log('task registered');
  };

  render() {
    return (
      <StateProvider store={store}>
        <MainStackNavigator />
      </StateProvider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center',},});

我如何将其委托给外部 js 文件

以及将它与我得到的一些通知代码合并：

const [expoPushToken,setExpoPushToken] = useState('');
  const [notification,setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();

  useEffect(() => {
    registerForPushNotificationsAsync().then((token) =>
      setExpoPushToken(token)
    );

    // This listener is fired whenever a notification is received while the app is foregrounded
    notificationListener.current = Notifications.addNotificationReceivedListener(
      (notification) => {
        setNotification(notification);
      }
    );

    // This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded,backgrounded,or killed)
    responseListener.current = Notifications.addNotificationResponseReceivedListener(
      (response) => {
        console.log('When a user interacts with a notification,this will be the response')
        console.log(response);
      }
    );

    return () => {
      Notifications.removeNotificationSubscription(
        notificationListener.current
      );
      Notifications.removeNotificationSubscription(responseListener.current);
    };
  },[]);


async function sendPushNotification(expoPushToken) {
  const message = {
    to: expoPushToken,sound: 'default',title: 'Morra di jobber ikke her',body: 'Det gjør heller ikke fattern',data: { someData: 'goes here' },};

  await fetch('https://exp.host/--/api/v2/push/send',{
    method: 'POST',headers: {
      Accept: 'application/json','Accept-encoding': 'gzip,deflate','Content-Type': 'application/json',body: JSON.stringify(message),});
}

async function registerForPushNotificationsAsync() {
  let token;
  if (Constants.isDevice) {
    const {
      status: existingStatus,} = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
    console.log(token);
  } else {
    alert('Must use physical device for Push Notifications');
  }

  if (Platform.OS === 'android') {
    Notifications.setNotificationChannelAsync('default',{
      name: 'default',importance: Notifications.AndroidImportance.MAX,vibrationPattern: [0,250,250],lightColor: '#FF231F7C',});
  }

  return token;
}

感谢回答时间短的本科生！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）