ReactNative集成个推消息推送

Stella981
• 阅读 614

前言

最近项目中需要集成消息推送功能,在以往的项目中都是使用的极光推送方案,现在的公司安卓端使用的是个推消息推送,所以计划在本次使用RN重构项目的过程中也采用了个推方案, 即个推官方提供的推送SDK React Native 插件(支持 Android & iOS)react-native-getui。 项目ReactNative版本号:0.63.4

集成

1. 自动添加依赖

yarn add react-native-getui

cd ios
pod install

2.手动添加配置

安卓部分

1.在android/build.gradle中添加maven地址中添加配置
maven {
            url "http://mvn.gt.igexin.com/nexus/content/repositories/releases/"
        }

ReactNative集成个推消息推送

2.android目录下,在app/build.gradle中添加如下配置

dependencies中添加依赖

implementation project(':react-native-getui')
3.android--> defaultConfig中添加如下配置
ndk {
            abiFilters "armeabi", "armeabi-v7a", "x86_64", "x86"
        }
        // 配置个推的三个参数
        manifestPlaceholders = [
                    GETUI_APP_ID : "your app id",
                    GETUI_APP_KEY : "your app key",
                    GETUI_APP_SECRET : "your app secret"
                ]

注意:yourAppId/yourAppKey/yourAppSecret 需要去个推官网 注册后,在后台配置获取。

4.在android/app/AndroidManifest.xml 的标签内添加meta-data
<!-- 配置个推的三个参数 -->
      <meta-data android:name="PUSH_APPID" android:value="${GETUI_APP_ID}" tools:replace="android:value"/>
      <meta-data android:name="PUSH_APPKEY" android:value="${GETUI_APP_KEY}" tools:replace="android:value"/>
      <meta-data android:name="PUSH_APPSECRET" android:value="${GETUI_APP_SECRET}" tools:replace="android:value"/>


      <meta-data android:name="MEIZUPUSH_APPID" android:value="" tools:replace="android:value"/>
      <meta-data android:name="MEIZUPUSH_APPKEY" android:value="" tools:replace="android:value"/>

      <meta-data android:name="MIPUSH_APPID" android:value="" tools:replace="android:value"/>
      <meta-data android:name="MIPUSH_APPKEY" android:value="" tools:replace="android:value"/>

      <meta-data android:name="OPPOPUSH_APPKEY" android:value="" tools:replace="android:value"/>
      <meta-data android:name="OPPOPUSH_APPSECRET" android:value="" tools:replace="android:value"/>

      <meta-data android:name="com.vivo.push.app_id" android:value="" tools:replace="android:value"/>
      <meta-data android:name="com.vivo.push.api_key" android:value="" tools:replace="android:value"/>

      <meta-data android:name="com.huawei.hms.client.appid" android:value="" tools:replace="android:value"/>
5.在MainApplication.java的文件里添加以下信息
import com.getui.reactnativegetui.GetuiModule;

@Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    // 初始化个推模块
    GetuiModule.initPush(this);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

ReactNative项目中JS调用代码

class GetuiPush extends Component{

  componentDidMount() {
    this._initGetuiPushListener()
  }

  _initGetuiPushListener = () => {
  //订阅消息通知
    this.receiveRemoteNotificationSub = NativeAppEventEmitter.addListener(
      'receiveRemoteNotification',
      (notification) => {
        switch (notification.type) {
          case "cid":
            console.log('初始化获取到cid', JSON.stringify(notification))
            break;
          case 'payload':
            console.log('payload 消息通知', JSON.stringify(notification))
            break
          case 'cmd':
            console.log('cmd 消息通知', 'cmd action = ' + notification.cmd)
            break
          case 'notificationArrived':
            console.log('notificationArrived 通知到达', JSON.stringify(notification))
            break
          case 'notificationClicked':
            console.log('notificationArrived 通知点击', JSON.stringify(notification))
            break
          default:
            break
        }
      }
    );
  }

  componentWillUnmount() {
  // 移除消息监听
    this.receiveRemoteNotificationSub &&
      this.receiveRemoteNotificationSub.remove();
  }

  render() {
    return null;
  }
}

遇到的问题

按照以上的步骤就可以正常通过个推官网进行推送消息到手机上了,但是。。。 凡是就怕但是,哈哈。 在进行公司项目的业务推送的时候,手机通知栏竟然没有任何反应,没有推送消息文字和声音提示,这就很难受了。 接下来,我开始检查手机的通知设置以及和同事进行测试,发现他的安卓原生项目是可以正常收到推送的,问了后台同事说也没有特别的设置,这。。。 后来看了同事的Android代码,发现这边竟然是使用的个推的透传消息,然后进行的处理。 oh my god! 见招拆招,拜读了个推的官网,是这样介绍透传(自定义消息)和普通消息的区别的。

通知消息和透传

  • 通知消息: 通知展示时效果:响铃、震动、通知是否可清除,下拉大图、长文本。 通知点击后效果:打开应用首页、打开应用内指定页面、打开浏览器指定网页。

  • 透传消息: 即自定义消息,效果由开发者自行管理,个推只负责消息传递,不做任何处理,默认不会在通知栏中展示,开发者需自行处理展示方式或后续动作。

ReactNative集成个推消息推送

看了以上说明之后大体明白了, 又和后台同事沟通了一下,确实采用的透传方式,这意味着通过透传方式进行消息推送,如果需要进行用户提示的话,就需要开发者自行实现了。

ReactNative处理透传消息

如果需要透传信息通过通知栏提醒用户的话,就相当于本地进行消息推送了。这里可以通过实现原生代码的方式进行处理,也可以使用一些第三方进行处理,这里推荐react-native-push-notification进行处理。 在使用这个库的时候,可能会遇到如下错误提示: ReactNative集成个推消息推送 只需要进行如下设置, 将requestPermissions设置为false:

/**
   * (optional) default: true
   * - Specified if permissions (ios) and token (android and ios) will requested or not,
   * - if not, you must call PushNotificationsHandler.requestPermissions() later
   * - if you are not using remote notification or do not have Firebase installed, use this:
   *     requestPermissions: Platform.OS === 'ios'
   */
  requestPermissions: false,

总结

本文分享到此结束,欢迎大家留言交流技术和职场生活。

觉得文章不错的,给我点个赞哇,关注一下呗! 技术交流可关注公众号【君伟说】,加我好友一起探讨 交流群:wayne214(备注技术交流)邀你入群,抱团学习共进步

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这