在前台按下时通知未导航到屏幕

如何解决在前台按下时通知未导航到屏幕

我正在使用 react-native-notifee 和 react-native-firebase v11.2.0

问题是，当我在应用程序处于前台时按下通知时，它没有导航到所需的屏幕。我的应用程序在后台运行时它运行良好。

通知.js

import notifee,{
  AndroidCategory,AndroidImportance,AndroidStyle,EventType
} from '@notifee/react-native';
import messaging from '@react-native-firebase/messaging';
import { requestNotificationPermission } from '../helpers/permissions';
import * as RootNavigator from '../navigator/NavigationRef';

const createChannel = async () => {
  try {
    const channel = await notifee.createChannel({
      id: 'default_channel',name: 'Default Channel',description: 'Default notification channel',sound: 'default',importance: AndroidImportance.HIGH,vibration: false
    });

    return channel;
  } catch (error) {
    console.log('Error in creating notification channel',error);
    return 'default_channel';
  }
};

export const requestPermissionForNotifications = async () => {
  const hasPermission = await messaging().hasPermission();

  if (!hasPermission) {
    // checking for ios notification permission;
    const isGranted = await requestNotificationPermission();
    if (isGranted < 1) return false;
  }
  // always request permisssion even if it is granted
  return messaging()
    .requestPermission()
    .then(() => console.log('granted'))
    .catch(err => console.log('error in granted',err));
};

export const displayNotification = async (
  title,body,notificationId,imageUrl = null
) => {
  try {
    // always check permisssion even if it has access to register the app to
    // receive the push notification as stated in documentation
    await requestPermissionForNotifications();
    const channel = await createChannel();

    let notificationObj = {
      title,id: notificationId,android: {
        channelId: channel,smallIcon: 'ic_launcher',category: AndroidCategory.ALARM,pressAction: {
          id: 'default'
        },timestamp: Date.now(),showTimestamp: true
      },ios: {
        sound: 'default',attachments: [
          {
            url: imageUrl
          }
        ]
      }
    };

    await notifee.displayNotification(notificationObj);
  } catch (error) {
    console.log('Error in displaying notification',error);
  }
};

export const onMessageReceived = async message => {
  const { messageId,notification } = message;

  return displayNotification(
    notification.title,notification.body,messageId,notification.image
  );
};

export const notificationPressActionEventListener = async ({
  type,detail
}) => {
  try {
    const { navigate } = RootNavigator.navigationRef.current;
    switch (type) {
      case EventType.PRESS:
          navigate('SampleStackScreen');
        break;
      default:
        break;
    }
  } catch (error) {
    console.log('Error in navigation',error);
  }
  return null;
};

export const getDeviceToken = async () => {
  const token = await messaging().getToken();
  if (token) return token;
  return null;
};

NavigationRef.js

import * as React from 'react';

export const navigationRef = React.createRef();

Home.js 中的监听器

componentDidMount() {
   this.notificationListener = messaging().onMessage(onMessageReceived);
   this.notificationActionEventListener = notifee.onForegroundEvent(
      notificationPressActionEventListener
   );
}

index.js 中的监听器

/** @format */

import messaging from '@react-native-firebase/messaging';
import notifee from '@notifee/react-native';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './src/App';
import {
  notificationPressActionEventListener,onMessageReceived
} from './src/firebase/notification';

notifee.onBackgroundEvent(notificationPressActionEventListener);

messaging().setBackgroundMessageHandler(onMessageReceived);

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