在前台显示通知反应原生 firebase v6

Posted 2023-05-07

【中文标题】在前台显示通知反应原生 firebase v6

【英文标题】：Show notification on foreground react native firebase v6

【发布时间】：2020-08-09 17:34:50

【问题描述】：

我正在使用最新的 react native 版本 0.62 和最新版本的 react-native-firebase，即 v6。我能够收到通知，它在后台运行良好，但在前台不显示。

截图如下：

这是我的代码：

checkPermission = async () => 
    const enabled = await messaging().hasPermission();
    console.log('enabled ******* ',enabled)
    if (enabled) 
      this.getFcmToken();
     else 
      this.requestPermission();
    
  ;

  getFcmToken = async () => 
    const fcmToken = await messaging().getToken();
    if (fcmToken) 
      console.log('Your Firebase Token is:', fcmToken);
      // this.showAlert('Your Firebase Token is:', fcmToken);
     else 
      console.log('Failed', 'No token received');
    
  ;

  requestPermission = async () => 
    try 
      await messaging().requestPermission();
      // User has authorised
     catch (error) 
      // User has rejected permissions
    
  ;

  messageListener = async () => 
    console.log('inside message listener ****** ')

    messaging().onMessage(async remoteMessage => 
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
  ;

  showAlert = (title, message) => 
    Alert.alert(
      title,
      message,
      [ text: 'OK', onPress: () => console.log('OK Pressed') ],
       cancelable: false ,
    );
  ;

  componentDidMount() 
    this.checkPermission();
    this.messageListener();
  

【问题讨论】：

你好兄弟你找到解决办法了吗

@ikmo 如果您仍有问题，我已添加答案，请检查。

【参考方案1】：

默认情况下 rnfirebase 不支持在应用程序处于前台状态时显示通知弹出窗口，因为他们提到了here。因此推送通知仅在应用处于后台状态或关闭时才会显示。

因此，如果您还想在前台模式下显示推送通知，那么您必须使用额外的库，该库将显示触发的推送通知作为本地通知，如其文档中所述。

如果 RemoteMessage 负载在发送到 onMessage 处理程序时包含通知属性，则设备不会向用户显示任何通知。相反，您可以触发本地通知或更新应用内 UI 以发出新通知。

因此，作为一种解决方案，您可以使用react-native-push-notification 在应用程序处于前台时触发推送通知。

为此，只需通过命令安装即可：

npm i react-native-push-notification

对于 android，您不需要执行任何本机安装步骤，只需通过此命令安装库，然后您可以触发本地推送通知，如下所示： 创建一个名为 NotificationController.android.js 的文件：

import React,  useEffect  from 'react';
import  Alert  from 'react-native';
import messaging from '@react-native-firebase/messaging';
import PushNotification from 'react-native-push-notification';

const NotificationController = (props) => 
  useEffect(() => 
    const unsubscribe = messaging().onMessage(async (remoteMessage) => 
      PushNotification.localNotification(
        message: remoteMessage.notification.body,
        title: remoteMessage.notification.title,
        bigPictureUrl: remoteMessage.notification.android.imageUrl,
        smallIcon: remoteMessage.notification.android.imageUrl,
      );
    );
    return unsubscribe;
  , []);

  return null;
;

export default NotificationController;

现在，当应用处于前台状态并且onMessage 收到来自 firebase 的任何消息时，PushNotification 将触发本地通知。

更新：适用于 iOS 对于 ios，您必须使用以下命令安装 @react-native-community/push-notification-ios：

npm i @react-native-community/push-notification-ios

还按照文档中的建议执行所有本机安装步骤。

然后您可以创建名为 NotificationController.ios.js 的文件，您可以在其中处理 iOS 通知。

import  useEffect  from 'react';
import  Alert  from 'react-native';
import messaging from '@react-native-firebase/messaging';
import PushNotification from 'react-native-push-notification';
import PushNotificationIos from '@react-native-community/push-notification-ios';

const NotificationController = (props) => 
  const navigation = useNavigation();
  // Called when application is open by clicking on notification
  // and called when application is already opend and user click on notification

  PushNotification.configure(
    onNotification: (notification) => 
      if (notification) 
        console.log(notification);
        Alert.alert('Opened push notification', JSON.stringify(notification));
      
    ,
  );

  useEffect(() => 
    // Usesd to display notification when app is in foreground
    const unsubscribe = messaging().onMessage(async (remoteMessage) => 
      PushNotificationIos.addNotificationRequest(
        id: remoteMessage.messageId,
        body: remoteMessage.notification.body,
        title: remoteMessage.notification.title,
        userInfo: remoteMessage.data,
      );
    );

    return unsubscribe;
  , []);

  return null;
;

export default NotificationController;

现在，在您的主屏幕或应用初始路由文件中调用<NotificationController />。

【讨论】：

react-native-push-notificatio 在频道创建之前无法正常工作您是如何做到的？谢谢

我认为不需要创建频道来推送通知即可获得作品。

【参考方案2】：

按照@Kishan Bharda 解决方案，我不得不为 IOS 前台通知做一些不同的事情（这里，我在 index.js 中有代码而不是不同的文件）：

import  AppRegistry, Platform  from 'react-native';
import App from './App';
import  name as appName  from './app.json';
import PushNotificationIOS from "@react-native-community/push-notification-ios";
import PushNotification from "react-native-push-notification";

if (Platform.OS === 'ios') 
    // Must be outside of any component LifeCycle (such as `componentDidMount`).
    PushNotification.configure(
        onNotification: function (notification) 
            console.log("NOTIFICATION:", notification);
            const  foreground, userInteraction, title, message  = notification;
            if (foreground && (title || message) && !userInteraction) PushNotification.localNotification(notification);
            notification.finish(PushNotificationIOS.FetchResult.NoData);
        
    );


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