RN

React Native集成极光消息推送

2019-06-21  本文已影响23人  Volon

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

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

  1. 在苹果开发者账户中配置好自己的APP的应用ID,然后使用上述一键生成证书功能生成自己的开发证书(不要忘了勾上推送通知)!


    这里写图片描述
    这里写图片描述
  2. 在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.haomeiwen.com/i7169473/f79dfa5cc67f5ea2?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![这里写图片描述](https://img.haomeiwen.com/i7169473/20049940d4681229?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


{
"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验证来源:(网上有在线编码工具)

image.png
上一篇下一篇

猜你喜欢

热点阅读