react-native：推送通知+解析

Question

我目前正在開發一個小型應用程序項目，以便在iOS上學習並嘗試使用react-native。 我有一些解析（parse.com）的經驗，並希望在新的應用程序中集成解析。 目前，我沒有問題，包括解析反應原生的js。 我可以使用帳戶等登錄。現在我需要向一定數量的用戶（並非所有用戶）發送推送通知。

我不明白的是推送通知應如何與react-native和parse一起使用。 通常，我會使用用戶ID連接設備安裝，然后將推送發送給一定數量的用戶（這意味着具有相應安裝的設備）。 本地反應指南（ https://facebook.github.io/react-native/docs/pushnotificationios.html#content ）沒有提到類似的內容。 即使它提供了解析指南作為參考，我也看不出我應該如何通過解析發送推送。 該指南也留下了許多需要的信息。 這些“聽眾”訂閱的來源是什么？ 我將從哪個服務器發送通知等？

據我了解，解析js無法讀取當前安裝。 我也不願意將Parse iOS添加到項目中。 這感覺不自然，不應該是必需的事情，雖然它可以讓我閱讀當前的安裝。 （但仍解析js無法注冊該安裝以訂閱推送通知）。

在這一點上，我感到有點失落。 這條信息（ https://news.ycombinator.com/item?id=9271687 ）告訴我它應該可能以某種方式。 我只是想不通如何:(

希望有人可以幫助我。 一些建議將得到真正的贊賞。

Answer 1

編輯 ：react-native現在默認實現此行為。 有趣的部分是register事件的事件監聽器，它現在返回設備令牌。 程序現在非常簡單。 看看文檔也看看JWindey的答案。 其中有一些非常重要的要點是實際觸發事件所需要的。

經過一段時間和大量的嘗試，我們今天想出了答案。 這是我們的解決方案，似乎工作得很好。

我們使用以下資源：

• 反應母語
• 解析-JS
• Parse Rest API
• react-native-remote-push（ https://github.com/darylrowland/react-native-remote-push ）

按照推送通知的解析指南（ https://parse.com/tutorials/ios-push-notifications ）進行正確設置（配置文件，證書等）。 稍后使用react-native-remote-push組件，您不必執行步驟5和6。

現在將react-native-remote-push添加到您的項目中。 我們不得不對代碼做一些小的調整（主要是處理遺留的objC代碼），但這可能取決於你自己的項目。

我們的項目有一些“起始頁面”，每次打開應用程序時都會顯示。 在此頁面上，我們處理推送通知權限以及設備令牌的注冊和推送通知的監聽器。 我們的目標是模仿我們使用解析iOS SDK獲得的相同行為。

我們需要先注冊設備並訂閱推送通道。 react-native-remote-push允許我們處理權限並接收設備令牌。 然后，我們繼續使用此設備令牌通過Rest API注冊此安裝。 此代碼是componentDidMount（）調用的一部分。

var PushManager = require('./RemotePushIOS');
var registerInstallation = require('./Installation');

componentDidMount() {
    PushManager.requestPermissions(function(err, data) {
        if (err) {
            console.log("Could not register for push");
        } else {
            registerInstallation({
                "deviceType": "ios",
                "deviceToken": data.token,
                "channels": ["global"]
            });
         }
    });

    PushManager.setListenerForNotifications(this.receiveRemoteNotification);
}

PushManager是react-native-remote-push所需的組件，registerInstallation是包含Rest API調用的函數。

/**
* registers an installation
* data should look like the following:
* {
*  "deviceType": "ios", // or "android"
*  // if android is targeted set
*  // "pushType": "gcm",
*  // "GCMSenderId": "56712320625545", // whatever the later means
*  "deviceToken": "29e32a686fd09d053e1616cb48",
*  "channels": [
*       ""
*   ]
* };
* for more information visit:
* https://www.parse.com/docs/rest#installations-uploading
*/
var registerInstallation = function(data) {
    var url = "https://api.parse.com";
    url += "/1/installations";
    fetch(url, {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'X-Parse-Application-Id': PARSE_APP_ID,
            'X-Parse-REST-API-Key': PARSE_REST_KEY,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(processStatus)
    .then(parseJson)
    .catch(error);
};

module.exports = registerInstallation;

“processStatus”，“parseJson”和“error”只是一些處理API調用結果的小函數。 如有必要，我可以提供更多細節。 此功能允許我們通過“數據”對象添加大量信息，例如用戶ID，應用程序版本，解析版本等，就像您習慣使用iOS SDK一樣。 我們現在只有一個基本的示例，但在此基礎上應該很容易擴展。 這一步對我們來說非常重要，因為我們需要將每個安裝與特定用戶相關聯。

您現在應該能夠接收推送通知。 您可以在充當偵聽器的“receiveRemoteNotification”函數中處理它們。 在react-native-remote-push組件的網站上提供了一個基本功能。

我希望我能分享一些關於這個話題的見解。 如果我應該詳細介紹某些部分，我很樂意添加更多信息。

Answer 2

我使用Parse + react-native組合進行了一些調查並使其正常工作。

您必須將Parse SDK（按照指南）添加到您的項目中，並鏈接所有必需的庫。

不要忘記在第5點添加步驟： https ： //parse.com/tutorials/ios-push-notifications 。

然后將RCTPushNotificationManager.h + m（來自react-native / Libraries）添加到您的項目中。 之后，在AppDelegate.m中添加以下內容：

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {
[[NSNotificationCenter defaultCenter] postNotificationName:@"RemoteNotificationReceived"
                                                    object:self
                                                  userInfo:userInfo];
}

應該這樣做。

Answer 3

官方PushNotificationIOS有register事件，我們可以從中獲取令牌。 因此，有了@MrMetet的REST API，我可以將設備安裝到Parse。

PushNotificationIOS.addEventListener('register', function(token){
 registerInstallation({
   "deviceType": "ios",
   "deviceToken": token,
   "channels": ["global"]
 })
});