如何使用 react-native-firebase v5 正确设置前台通知？答案

【问题标题】：How to correctly set up foreground notifications using react-native-firebase v5?如何使用 react-native-firebase v5 正确设置前台通知？
【发布时间】：2019-11-29 16:32:42
【问题描述】：

我们有一个 react-native 应用，它通过 FCM 在以下环境中运行通知：

  react-native: 0.59.10,
  react-native-firebase: 5.5.6

所有配置都已设置，证书已配置等。直到现在，通知一直像时钟一样工作，但最近我们停止在前台接收通知。

这是NotificationsManager 代码：

import firebase from 'react-native-firebase';

const CHANNEL = 'default';

...

const localNotificationListener = React.useRef();
const notificationOpenListener = React.useRef();
const onTokenRefreshListener = React.useRef();

const receiveForegroundPN = (n) => {
    const notification = new firebase.notifications.Notification()
      .setNotificationId(n.notificationId)
      .setTitle(n.title)
      .setSubtitle(n.subtitle)
      .setBody(n.body)
      .setData(n.data);

    if (Platform.OS === 'android') {
      notification
        .android.setChannelId(CHANNEL)
        .android.setSmallIcon('ic_launcher');
    }
    firebase.notifications().displayNotification(notification);
  };

React.useEffect(() => {
    const channel = new firebase.notifications.Android.Channel(
      CHANNEL,
      'Bank Notifications',
      firebase.notifications.Android.Importance.Max,
    ).setDescription('*****');

    firebase.notifications().android.createChannel(channel);

    localNotificationListener.current = firebase.notifications().onNotification(receiveForegroundPN);
    notificationOpenListener.current = firebase.notifications().onNotificationOpened(openNotification);

    onTokenRefreshListener.current = firebase.messaging().onTokenRefresh((fcmToken) => {
      registerToken({
        device_token: fcmToken,
      });
    });

    runFlow();

    return () => {
      localNotificationListener.current();
      notificationOpenListener.current();
      onTokenRefreshListener.current();
    };
  }, []);

当应用程序在后台时，通知在两个平台上都可以正常工作，但当应用程序在前台时从不显示。

我尝试设置show_on_foreground: "true"，但没有帮助。实际上，我尝试在 receiveForegroundPN 方法中记录任何内容，但它从未被调用，也就是说，当应用程序运行时，它看起来好像从未从 firebase 收到通知。

这可能是什么问题以及使通知起作用的可能解决方案？

更新

突然之间，在发布此消息的一小时内，iOS 开始收到前台通知。 Android 仍然无法运行，但它曾经使用过。

【问题讨论】：

标签： firebase react-native push-notification react-native-firebase

【解决方案1】：

我也有类似的问题.. , onNotification 方法没有被触发，所以我尝试了 onMessage 方法，它似乎适用于前台。

 firebase.messages().onMessage(msg => {
  // ... your code here
});

【讨论】：

【解决方案2】：

迭代 Amr 的答案。

根据documentation，您必须挂钩到 Firebase 的回调，以便在前台收到推送通知时收到通知。从那时起，您可以决定如何处理该消息。

最简单的方法是显示警报Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage)); 或
您可以使用另一个库来显示本地通知。下面是一个使用 react-native-notifications 库的示例：

// Just call the hook in some root component that's always present

export const useDisplayRemoteNotifications: () => void = () => {
  useEffect(() => {
    return messaging().onMessage(async remoteMessage => {
      Notifications.postLocalNotification({
        title: remoteMessage.notification?.title || '',
        body: remoteMessage.notification?.body || '',
        fireDate: dayjs().add(1, 'second').toDate(), // one second later
      });
    });
  }, []);
};

【讨论】：