React Nativeでプッシュ通知受け取り後のハンドリング

React Nativeでプッシュ通知の受け取りとハンドリング

プッシュ通知自体の実装は完了しているものとします。

使用するパッケージ

こちらがReact Nativeの定番のプッシュ通知ハンドリングのパッケージ

インストール

yarn add react-native-push-notification
react-native link

プッシュ通知のハンドリング

var PushNotification = require('react-native-push-notification');

PushNotification.configure({
    // リモートまたはローカルのプッシュ通知を受け取ったか開かれたときに呼ばれる
    onNotification: function(notification) {
        console.log( 'NOTIFICATION:', notification );

        // iOSのみ必須(詳しくはこちら fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html)
        notification.finish(PushNotificationIOS.FetchResult.NoData);
    },

    // ANDROIDのみ、リモートでは必須
    senderID: "GCM（FCM）のSENDER_ID",

    // IOSのみ
    permissions: {
        alert: true,
        badge: true,
        sound: true
    },

    // 以下二つはdefault: true
    popInitialNotification: true,
    requestPermissions: true,
});

基本的に設定することはあまりなく、onNotificationの処理のなかで切り分ける模様。

iOSでNative module cannot be nullとなる場合の対処法

ネイティブと自動リンクさせるための以下のコマンドをまず叩いたか確認

react-native link

linkできない場合

公式に解決法が載っています。
https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking

結論

記事にするほどじゃなかった。