{"id":19614803,"url":"https://github.com/leancloud/react-native-installation-demo","last_synced_at":"2025-04-28T01:32:18.899Z","repository":{"id":66228620,"uuid":"46025824","full_name":"leancloud/react-native-installation-demo","owner":"leancloud","description":null,"archived":false,"fork":false,"pushed_at":"2017-09-04T09:37:58.000Z","size":17,"stargazers_count":29,"open_issues_count":2,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-05T04:51:18.557Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leancloud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-11-12T03:07:41.000Z","updated_at":"2021-03-03T01:55:21.000Z","dependencies_parsed_at":"2023-05-01T09:00:29.679Z","dependency_job_id":null,"html_url":"https://github.com/leancloud/react-native-installation-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leancloud%2Freact-native-installation-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leancloud%2Freact-native-installation-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leancloud%2Freact-native-installation-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leancloud%2Freact-native-installation-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leancloud","download_url":"https://codeload.github.com/leancloud/react-native-installation-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251234171,"owners_count":21556792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T10:53:50.193Z","updated_at":"2025-04-28T01:32:18.885Z","avatar_url":"https://github.com/leancloud.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"LeanCloud React Native Installation Demo\n====\n本 Demo 演示了如何在 React Native for iOS 中使用 LeanCloud 的推送服务。\n\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/175227/11111088/f1dacae0-893f-11e5-88f7-8e1d17b6dad5.png\" width=\"360\" /\u003e\n\n----\n### 源码分析\n\n在开始之前，我们假设你已经了解 iOS 的推送运行机制，如果不了解，可以先阅读[《细说 iOS 消息推送》](https://blog.leancloud.cn/1163/) 以及 [《LeanCloud 消息推送开发指南》](https://leancloud.cn/docs/push_guide.html)。\n\n#### 配置\n\n首先，按照 [Linking Libraries - React Native docs](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content) 的说明，在你的 iOS 项目中引入 RCTPushNotification。\n\n然后，按照 [PushNotificationIOS - React Native docs](https://facebook.github.io/react-native/docs/pushnotificationios.html#content) 的说明，将推送相关的事件代理给 js。\n\n接下来，在你的 React 项目中安装依赖模块 leancloud-storage 与 [leancloud-installation](https://github.com/leancloud/javascript-sdk-installation-plugin)。\n```\nnpm install leancloud-storage leancloud-installation --save\n```\n最后在 js 入口文件（index.ios.js）中引入所需要的模块并初始化：\n```javascript\nvar PushNotificationIOS = require('react-native').PushNotificationIOS;\nvar AV = require('leancloud-storage');\nAV.initialize('appId', 'appKey');\nvar LeancloudInstallation = require('leancloud-installation')(AV);\n```\n\n#### 获取 deviceToken，更新 \\_Installation 表\n\n为了保证 installation 得到及时的更新，我们需要在每次 app 启动时向 LeanCloud 进行注册。具体操作为：\n\n第一步：在 app root component 的 `componentDidMount` 阶段，注册 `PushNotificationIOS` 的 `register` 事件回调（不要忘记在 `componentWillUnmount` 时移除）。然后调用 `PushNotificationIOS.requestPermissions` 以获取 `deviceToken`。\n```javascript\ncomponentDidMount: function() {\n  // Subscribe to register event of PushNotificationIOS.\n  PushNotificationIOS.addEventListener('register', this._onRegister);\n  // Request permissions and deviceToken\n  PushNotificationIOS.requestPermissions();\n}\n```\n如果用户第一次打开 app，会出现 alert 询问是否允许推送，同意后 `register` 事件会被派发。此后用户再次打开 app 会直接派发 `register` 事件。\n\n第二步：在 `register` 事件的回调中获取当前设备的 installation 实例，设置 `deviceToken`，然后保存。\n```javascript\n_onRegister: function(deviceToken) {\n  LeancloudInstallation.getCurrent()\n    .then(installation =\u003e\n      // Set new deviceToken and save.\n      installation.save({\n        deviceToken: deviceToken,\n        apnsTopic: 'com.example',\n        deviceType: 'ios',\n      });\n    );\n}\n```\n`register` 事件的回调的第一个参数是 `deviceToken`。`LeancloudInstallation.getCurrent()` 得到的 `installation` 是 `AV.Object` 子类的实例，所以 [`AV.Object` 的方法](https://leancloud.cn/docs/api/javascript/symbols/AV.Object.html)也都可以调用，比如上面对 `installation` 的操作也可以写作：\n```javascript\ninstallaton.set('deviceToken', deviceToken);\nreturn installaton.save();\n```\n除了 deviceToken，你也可以设置其他的字段，系统字段的含义参见[消息推送开发指南 - 基本概念](https://leancloud.cn/docs/push_guide.html#Installation)。\n\n### 响应推送\n响应收到的推送消息分为两种情况\n\n#### App 正在运行\n如果 app 正在运行，包括在后台运行，`PushNotificationIOS` 会派发 `notification` 事件，其参数及用法参见 [PushNotificationIOS 文档](https://facebook.github.io/react-native/docs/pushnotificationios.html)。\n\n#### 点击推送消息启动 app\n如果 app 是通过点击推送消息「冷启动」的，调用 `PushNotificationIOS.popInitialNotification()` 方法可以得到对应的 `notification`。然后就可以分析 `notification` 的信息跳转到不同的界面。同样，这个方法应该在 root component 的 `componentDidMount` 阶段调用。\n\n### FAQ\n#### Simulator 无法运行\n是的，推送功能必须真机调试。\n#### 红屏了: Could not connect to development server.\n请将 demo [这一行](https://github.com/leancloud/react-native-installation-demo/blob/master/ios/installationDemo/AppDelegate.m#L36)中的 IP 地址改为你电脑的局域网 IP 地址。\n#### How about Android\n由于 LeanCloud Android 推送功能是 Android SDK 来实现的，所以目前并没有类似 `PushNotificationIOS` 的 React Native 模块可用，建议直接使用 Android SDK，然后自己实现 SDK 与 js 之间的事件代理。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleancloud%2Freact-native-installation-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleancloud%2Freact-native-installation-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleancloud%2Freact-native-installation-demo/lists"}