美文网首页RN
React Native集成极光消息推送

React Native集成极光消息推送

作者: Volon | 来源:发表于2019-06-21 08:41 被阅读23次

    极光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

    相关文章

      网友评论

        本文标题:React Native集成极光消息推送

        本文链接:https://www.haomeiwen.com/subject/jigjqctx.html