React Native集成极光消息推送

极光IOS消息推送证书一键生成地址：https://onesignal.com/provisionator

一、申请激光账号并创建应用：地址：https://www.jiguang.cn
二、IOS推送设置

在苹果开发者账户中配置好自己的APP的应用ID，然后使用上述一键生成证书功能生成自己的开发证书（不要忘了勾上推送通知）!
在IOS推送设置中上传自己的证书（密码一键生成后会给出）

这里写图片描述
3.xcode修改

三、项目构建：
1.项目init：react-native init Test
2.安装：
npm install jpush-react-native jcore-react-native –save

3.执行link命令：

react-native link jpush-react-native
react-native link jcore-react-native –save

终端提示输入key时，将自己申请的key填入回车即可

四、项目中代码：
这里写图片描述

import React, { Component } from 'react';
import JPushModule from 'jpush-react-native'

import {
  Text,
  View
} from 'react-native';


export default class App extends Component<{}> {
    jumpSecondActivity =() =>{
        console.log('jump to SecondActivity')
    }

    componentDidMount () {
        JPushModule.initPush();

       //提示设备是否要接收通知
        // JPushModule.setupPush();

        JPushModule.getRegistrationID((id)=>{
            console.debug(JSON.stringify(id));
            console.log('id: ' + id)
        })

        JPushModule.addReceiveCustomMsgListener(map => {
            console.log('extras: ' + map.extras)
        })

        JPushModule.addReceiveNotificationListener(map => {
            console.log('alertContent: ' + map.alertContent)
            console.log('extras: ' + map.extras)

        })

        JPushModule.addReceiveOpenNotificationListener(map => {
            console.log('Opening notification!')
            console.log('map.extra: ' + map.extras)
            this.jumpSecondActivity()
            // JPushModule.jumpToPushActivity("SecondActivity");
        })

        JPushModule.addGetRegistrationIdListener(registrationId => {
            console.log('Device register succeed, registrationId ' + registrationId)
        }）    }     componentWillUnmount（）{         JPushModule.removeReceiveCustomMsgListener（receiveCustomMsgEvent）        JPushModule.removeReceiveNotificationListener（receiveNotificationEvent）        JPushModule.removeReceiveOpenNotificationListener（openNotificationEvent）        JPushModule.removeGetRegistrationIdListener（getRegistrationIdEvent）        的console.log（ '将清除所有通知'）        JPushModule.clearAllNotifications（）    }   渲染（ ）{     return（      <View>         <Text> Hello </ Text>       </ View>     ）;   } } ```





















五，调用极光API：地址：

https://docs.jiguang.cn/jpush/server/push/rest_api_v3_push

推送通知案例：
![这里写图片描述](https://img-blog.csdn.net/20180727171051641?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdWZ1bG9uZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
![这里写图片描述](https://img-blog.csdn.net/20180727171102739?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdWZ1bG9uZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

{
“platform”:”all”,
“audience”:{
“registration_id”:[“这里填要发送的对象的注册ID或者平台”]

},
“notification”:{
“alert”:”我来玩玩 !”,
“android”:{
“extras”:{
“android-key1”:”android-value1”
}
},
“ios”:{
“sound”:”sound.caf”,
“badge”:”+1”,
“extras”:{
“ios-key1”:”ios-value1”
}}},
“options”:{
“apns_production”:false
}}
“`

base64验证来源：（网上有在线编码工具）
这里写图片描述

React Native集成极光消息推送

猜你喜欢