react-native：推送通知+解析

Question

我目前正在开发一个小型应用程序项目，以学习和试用 iOS 上的 react-native。我对解析 (parse.com) 有一些经验，并且很乐意在新应用程序中集成解析。目前，我没有任何问题，包括将 js 解析为 react-native。我可以使用帐户等登录。现在我需要向一定数量的用户（不是所有用户）发送推送通知。

我不明白的是推送通知应该如何与 react-native 和解析一起工作。通常，我会将设备安装与用户 ID 关联起来，然后向一定数量的用户（即具有相应安装的设备）发送推送。 react-native 指南 (https://facebook.github.io/react-native/docs/pushnotificationios.html#content) 没有提到类似的内容。即使它提供了解析指南作为参考，我也看不出我应该如何通过解析发送推送。该指南也留下了很多信息。这些 "Listeners" 订阅了哪些来源？我将从哪个服务器发送通知等？

据我了解，parse js 无法读取当前安装。我也犹豫要不要将 Parse iOS 添加到项目中。这感觉不自然，不应该是必须要做的事情，尽管它可以让我阅读当前的安装。（但仍然解析 js 无法注册该安装以订阅推送通知）。

说到这里，我有点失落。这条信息（https://news.ycombinator.com/item?id=9271687）告诉我，这应该是有可能的。我只是想不通:(

希望有人能帮助我。一些建议将不胜感激。

Answer 1

我对 Parse + react-native 组合进行了一些调查并使其正常工作。

您必须将 Parse SDK（按照指南）添加到您的项目中，并且 link 所有必要的库。

不要忘记在第 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 2

编辑：react-native 现在默认实现了这个行为。有趣的部分是注册事件的事件侦听器，现在 returns 设备令牌。现在程序非常简单。只需看看 docs 也可以查看 JWindey 的回答。其中有一些非常重要的点需要实际触发事件。

经过一段时间的大量尝试，我们今天得出了答案。这是我们的解决方案，它似乎工作得很好。

我们使用以下资源：

本机反应
解析-js
解析休息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 代码），但这可能取决于您自己的项目。

我们的项目有某种 "starting page" 每次打开应用程序时都会显示。在此页面上，我们处理推送通知权限以及设备令牌的注册和推送通知的侦听器。我们的目标是模仿我们在解析 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 调用结果的小函数。如有必要，我可以提供更多详细信息。这个函数允许我们通过 "data" 对象添加很多信息，例如用户 ID、应用程序版本、解析版本等，就像您习惯从 iOS SDK 中一样。我们现在只有一个基本的例子可以工作，但应该很容易在此基础上进行扩展。这一步对我们来说非常重要，因为我们需要将每个安装与特定用户相关联。

您现在应该可以接收推送通知了。您可以在充当侦听器的 "receiveRemoteNotification" 函数中处理它们。 react-native-remote-push组件官网提供了一个基本功能

我希望我能分享一些关于这个话题的见解。如果我应该对某些部分进行更详细的介绍，我会很乐意添加更多信息。

Answer 3

官方PushNotificationIOS有register事件，我们可以从中获取token。因此，有了@MrMuetze 的 REST API，我可以将设备安装到 Parse。

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

react-native：推送通知+解析

react-native: push notifications + parse

notifications

push

ios

parse-platform

react-native