Реагируйте на собственные облачные сообщения Firebase 6 и уведомления Pu sh - PullRequest
Новая
       36

Реагируйте на собственные облачные сообщения Firebase 6 и уведомления Pu sh

1 голос
/ 26 февраля 2020

Я работаю с реакцией native и firebase 6 для отправки уведомлений pu sh. Я использую официальную документацию новой версии: 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.mi добавлены некоторые функции: 

// 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];
}

В моем компоненте . 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 ---- //

Я отправляю запрос POST на https://fcm.googleapis.com/fcm/send: 

{
 "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, но я не могу обработать действие щелчка:

Я хочу перенаправить на указанный маршрут c, когда пользователь нажимает на уведомление.

1 Ответ

1 голос
/ 27 февраля 2020

Я не использовал Firebase для уведомлений, но, как вы говорите, уведомления работают, тогда мне кажется, что проблема заключается в том, что вы хотите справиться с этим, когда ваше приложение открывается.

Так что здесь Вот шаги, которые вы должны выполнить, чтобы выполнить свою работу.

  1. Получите данные, поступающие в уведомлении о событии onNotificationOpened. Проверьте эту ссылку , чтобы проверить, получаете ли вы данные уведомления.
  2. Далее вы хотите указать c маршрут на основе уведомления. Что я делаю, отправляю тип экрана и идентификатор, связанный с этим экраном, чтобы перемещаться туда, например: 
{
    "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);

}
Теперь, если вы хотите запустить указанную функцию c на основе уведомления, вы можете сделать это на основе полученной информации. Как и в этом примере, я должен сделать запрос API для получения данных этого места по идентификатору. 

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

useEffect(() => {
    getThePlaceDetails(id);
}, [id]);
...