React Native Firebase 6 云消息传递和推送通知

Posted 2023-02-24

【中文标题】React Native Firebase 6 云消息传递和推送通知

【英文标题】：React Native Firebase 6 cloud messaging and Push notifications

【发布时间】：2020-02-26 14:02:17

【问题描述】：

我正在使用 react native 和 firebase 6 来发送推送通知。 我使用新版本的官方文档： https://invertase.io/oss/react-native-firebase/v6

我为 android 和 ios 添加了原生代码来处理发送和接收通知

在我的 AndroidManifest.xml 中：

<!-- [START firebase_service] -->
        <service
            android:name=".java.MyFirebaseMessagingService"
            android:exported="false">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
        <!-- [END firebase_service] -->

我没有创建 MyFirebaseMessagingService。

我在 AppDelegate.m 中添加了一些功能：

// Required for the register event.
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken

  [FIRMessaging messaging].APNSToken = deviceToken;
  [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
  NSLog(@"APNs device token retrieved: %@", deviceToken);


// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error

  [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
  NSLog(@"Unable to register for remote notifications: %@", error);

// Required for the localNotification event.
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification

  [RNCPushNotificationIOS didReceiveLocalNotification:notification];

在我的 Component.js 中，我得到这样的令牌：

// Firebase
import firebase from '@react-native-firebase/app'
import messaging from '@react-native-firebase/messaging'

  // ----- COMPONENT DID MOUNT ---- //
  async componentDidMount () 
    // ====================================================== //
    // ====================================================== //
    // ====================================================== //
    const granted = messaging().requestPermission()

    if (granted) 
      console.log('User granted messaging permissions!')
      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
      firebase
        .messaging()
        .getToken()
        .then(fcmToken => 
          if (fcmToken) 
            // user has a device token
            console.log('-------- FCM TOKEN -------')
            console.log(fcmToken)
            console.log(JSON.stringify(fcmToken))
            this._setItem(fcmToken)
           else 
            // user doesn't have a device token yet
            console.log('error')
          
        )
      // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
     else 
      console.log('User declined messaging permissions :(')
    
    // ====================================================== //
    // ====================================================== //
    // ====================================================== //
  
  // ----- FIN COMPONENT DID MOUNT ---- //

我向https://fcm.googleapis.com/fcm/send发送POST请求：

 "to" : "token",
 "notification" : 
 "body" : "un nouveau partage",
 "title" : "un partage de contact reçu",
 "priority" : "high",
 "vibration":true,
 "sound": "Enabled",
 "badge":1,
 "requireInteraction": true,
 "click_action": "fcm.ACTION.HELLO"
 ,
 "data" : 
 "body" : "nouvelle opportunité",
 "title" : "un nouveau partage",
 "content_available" : true,
 "priority" : "high"
  

我收到了 android 和 ios 的通知，但我无法处理点击操作：

当用户点击通知时，我想重定向到特定的路由。

【参考方案1】：

我没有将 Firebase 用于通知，但正如你所说的通知正在工作，那么在我看来，实际问题是你想在你的应用打开时处理它。

以下是完成工作所必须遵循的步骤。

在事件onNotificationOpened 上获取通知中的数据。查看 this link 以检查您是否收到通知数据。 接下来，您要在特定路由的基础上进行通知。我所做的是，发送屏幕类型和与该屏幕相关的 ID 以导航到那里，例如：

    "entity": "Place",
    "id": "123"

因此，当我收到通知时，我会将数据发送到开关盒工厂，该工厂会根据该数据中的信息导航到屏幕。类似的东西。

function navigateToScreen(entity:string, id:string)

   let screenName = "";
   let params = 

   switch(entity)
      case "Place": 
          screenName = "placeScreen";
          params = id;
          break;
      default: return;
   

   // Navigation Service = https://reactnavigation.org/docs/navigating-without-navigation-prop/
   NavigationService.navigate(screenName, params);

现在，如果您想根据通知运行特定功能，您可以根据收到的信息执行此操作。就像在这个例子中一样，我必须创建一个 API req 来通过 id 获取那个地方的数据。

const id = props.match.params['id'];

useEffect(() => 
    getThePlaceDetails(id);
, [id]);

【讨论】：

感谢您的回答。我目前阅读了您发送的文档，我发现该部分很有趣：“如果您的应用程序已关闭，您可以通过单击/点击/打开的通知来检查它是否已打开，如下所示”。我尝试了代码，但我的问题是我正在使用：-从'@react-native-firebase/app'导入firebase-从'@react-native-firebase/messaging'（firebase 6）导入消息，所以我可以' t find type Notification, NotificationOpen

我要离开这里github.com/invertase/react-native-firebase/issues/2566