github原地址

极光推送官方支持的 React Native 插件

安装

npm install jpush-react-native --save
npm install jcore-react-native --save ## jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native

一、自动配置部分(以下命令均在你的 REACT NATIVE PROJECT 目录下运行,自动配置后仍需手动配置一部分)

1.1执行脚本
npm run configureJPush <yourAppKey> <yourModuleName>
//module name 指的是你 Android 项目中的模块名字(对 iOS 没有影响,不填写的话默认值为 app,会影响到查找 AndroidManifest 问题,
//如果没找到 AndroidManifest,则需要手动修改,参考下面的 AndroidManifest 配置相关说明)
//举个例子:
npm run configureJPush d4ee2375846bc30fa51334f5 app
1.2Link 项目
//执行自动配置脚本后再执行 link 操作
react-native link

二、手动操作部分 (3个步骤)

2.1

第一步:修改 app 下的 build.gradle 配置:
your react native project/android/app/build.gradle

android {
defaultConfig {
applicationId "yourApplicationId"
...
manifestPlaceholders = [
JPUSH_APPKEY: "yourAppKey", //在此替换你的APPKey
APP_CHANNEL: "developer-default" //应用渠道号
]
}
}
...
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile project(':jpush-react-native') // 添加 jpush 依赖
compile project(':jcore-react-native') // 添加 jcore 依赖
compile "com.facebook.react:react-native:+" // From node_modules
}

将此处的 yourApplicationId 替换为你的项目的包名;yourAppKey 替换成你在官网上申请的应用的 AppKey。

2.2

检查是否导入以下配置项:
检查一下 dependencies 中有没有添加 jpush-react-native 及 jcore-react-native 这两个依赖。

your react native project/android/app/build.gradle

...
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile project(':jpush-react-native') // 添加 jpush 依赖
compile project(':jcore-react-native') // 添加 jcore 依赖
compile "com.facebook.react:react-native:+" // From node_modules
}

  

检查 android 项目下的 settings.gradle 配置有没有包含以下内容:

settings.gradle

include ':app', ':jpush-react-native', ':jcore-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')

  

检查一下 app 下的 AndroidManifest 配置,有没有增加 <meta-data> 部分。

your react native project/android/app/AndroidManifest.xml

<application
...
<!-- Required . Enable it you can get statistics data with channel -->
<meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
<meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/> </application>

  

2.3:加入 JPushPackage (找到 app 下的 MainApplication.java):

app/src.../MainApplication.java

  private boolean SHUTDOWN_TOAST = false;
private boolean SHUTDOWN_LOG = false; private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
} @Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
//加入 JPushPackage
new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
);

  

上面 JPushPackage 的两个参数是 bool 类型的,第一个参数设置为 true 表示关闭 toast 提示,第二个设置为 true 表示关闭日志打印,建议在 debug 版本中打开。然后在 MainActivity 中加入一些初始化代码即可:

app/src.../MainActivity.java

public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
JPushInterface.init(this);
} @Override
protected void onPause() {
super.onPause();
JPushInterface.onPause(this);
} @Override
protected void onResume() {
super.onResume();
JPushInterface.onResume(this);
}
}

  

收到推送

添加了此事件后,在收到推送时将会触发此事件。

需要注意的是,v1.6.6 版本以后,增加了 notifyJSDidLoad 方法,在监听所有相关事件之前要调用此方法,否则不会收到点击通知事件

example/react-native-android/push_activity.js

...
import JPushModule from 'jpush-react-native';
...
export default class PushActivity extends React.Component {
componentDidMount() {
// 在收到点击事件之前调用此接口
JPushModule.notifyJSDidLoad((resultCode) => {
if (resultCode === 0) {
}
});
JPushModule.addReceiveNotificationListener((map) => {
console.log("alertContent: " + map.alertContent);
console.log("extras: " + map.extras);
// var extra = JSON.parse(map.extras);
// console.log(extra.key + ": " + extra.value);
});
}

  

点击通知

在用户点击通知后,将会触发此事件。

...
componentDidMount() {
JPushModule.addReceiveOpenNotificationListener((map) => {
console.log("Opening notification!");
console.log("map.extra: " + map.key);
});
}

  

得到 REGISTRATIONID

用户注册成功后(一般在用户启动应用后),如果订阅了这个事件,将会收到这个 registrationId。

...
componentDidMount() {
JPushModule.addGetRegistrationIdListener((registrationId) => {
console.log("Device register succeed, registrationId " + registrationId);
});
}

  

清除所有通知

建议在用户退出前台后调用。

   ...
componentWillUnmount() {
console.log("Will clear all notifications");
JPushModule.clearAllNotifications();
}

  

设置标签

example/react-native-android/set_activity.js

  ...
setTag() {
if (this.state.tag !== undefined) {
/*
* 请注意这个接口要传一个数组过去,这里只是个简单的示范
*/
JPushModule.setTags(["VIP", "NOTVIP"], () => {
console.log("Set tag succeed");
}, () => {
console.log("Set tag failed");
});
}
}

  

设置别名
...
setAlias() {
if (this.state.alias !== undefined) {
JPushModule.setAlias(this.state.alias, () => {
console.log("Set alias succeed");
}, () => {
console.log("Set alias failed");
});
}
}

  

jpush-react-native 推送功能(Android 篇)的更多相关文章

  1. 你不可不知的 React Native 混合用法(Android 篇)

    前言 当前 React Native 虽说版本更新比较快,各种组件也提供的很全面了,但是在某些情况下,混合开发的方式才会快速缩短开发周期,原因无非就是原生平台的"底蕴"无疑更深,拥 ...

  2. java集成jpush实现客户端推送

    代码地址如下:http://www.demodashi.com/demo/13700.html 前言 java 集成jpush 实现客户端推送 一.准备工作 开发环境: jdk1.6 Eclipse ...

  3. React-Native 工程添加推送功能 (iOS 篇)

    推送已经是是手机应用的基本功能,如果自己实现一套推送系统费时费力,所有一般我们会使用第三方的推送服务,这里我使用「极光推送」作为集成推送的例子,因为有现成的 react native 插件 jpush ...

  4. Android之使用个推实现三方应用的推送功能

    PS:用了一下个推.感觉实现第三方应用的推送功能还是比较简单的.官方文档写的也非常的明确. 学习内容: 1.使用个推实现第三方应用的推送.      所有的配置我最后会给一个源代码,内部有相关的配置和 ...

  5. Android消息推送(二)--基于MQTT协议实现的推送功能

    国内的Android设备,不能稳定的使用Google GCM(Google Cloud Messageing)消息推送服务. 1. 国内的Android设备,基本上从操作系统底层开始就去掉了Googl ...

  6. xamarin.android 消息推送功能--极光推送

    最近在使用xamarin.android的消息推送功能,官方使用的例子是FCM方式,按照官方文档,使用FQ软件是可以成功的,但是在国内由于众所周知的原因,在国内服务并不能使用,于是查找国内各自推送平台 ...

  7. 基于EasyDarwin EasyPusher实现Android手机直播推送功能

    EasyPusher直播推送在之前就已经稳定支持了Windows.Linux.ARM上的RTSP直播推送功能,配合EasyDarwin开源流媒体服务器,延时基本在1s以内,这个技术方案经过一年多时间, ...

  8. 拾人牙慧篇之——基于HTML5中websocket来实现消息推送功能

    一.写在前面 要求做一个,后台发布信息,前台能即时得到通知的消息推送功能.网上搜了也有很多方式,ajax的定时询问,Comet方式,Server-Sent方式,以及websocket.表示除了定时询问 ...

  9. React Native移动框架功能研究

    React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...

  10. 基于APNs最新HTTP/2接口实现iOS的高性能消息推送(服务端篇)

    1.前言 本文要分享的消息推送指的是当iOS端APP被关闭或者处于后台时,还能收到消息/信息/指令的能力. 这种在APP处于后台或关闭情况下的消息推送能力,通常在以下场景下非常有用: 1)IM即时通讯 ...

随机推荐

  1. JavaSE项目之员工收录系统

    在Java SE中,对IO流与集合的操作在应用中比较重要.接下来,我以一个小型项目的形式,演示IO流.集合等知识点在实践中的运用. 该项目名称为“员工收录系统”,主要是通过输入员工的id.姓名信息,实 ...

  2. IEnumerable的几个简单用法

    咋一看到IEnumerable这个接口,我们可能会觉得很神奇,在一般的编程时,基本上我们是想不到去用它的,可是,俗话说得好,存在便是道理,那么,它对我们来说,能够带来哪些奇妙的事情呢? 要想弄懂它,我 ...

  3. Funny Car Racing(最短路变形)

    描述 There is a funny car racing in a city with n junctions and m directed roads. The funny part is: e ...

  4. windows 下安装 nginx + php

    1. 下载软件 需要的软件有nginx,php,mysql(如不需要可不安装) nginx.org,www.php.net上面有得下 全部解压出来 php基本不用做任何修改(下载直接解压版本的) 用c ...

  5. 小程序canvasu真机上数据图片不能使用

    canvas遇到的坑 1.文字换行 2.真机不能使用网络数据图片(真坑) 点击显示效果我就不写了,你们可以自己加一下 全部代码贴出来 css #preview { width: 100%; heigh ...

  6. Jmeter------将JDBC Request的查询结果作为另一个接口的请求参数

    一.前言 jmeter已配置连接成功数据库,不会的可查看:https://www.cnblogs.com/syw20170419/p/9832402.html 二.需求 将JDBC Request的r ...

  7. [实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹

    写在前面 上篇文章更新了编辑了文件名的操作,本片文章将实现新建文件夹的功能. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战 ...

  8. run-time setting 中设置simulate browser cache 选项详解

    Browser  Emulation: Simulate  browser  cache:配置Vuser模拟带缓存的浏览器.缺省缓存是被允许的, 可以通过禁止该选项来使得所有VUser模拟的浏览器都不 ...

  9. LoadRunner项目结合抓包工具

    LoadRunner项目结合抓包工具 常见的抓包工具包括:     1. Http协议   报文分为"请求","应答"两大类. 请求: 方法-URL-协议/版本 ...

  10. JQuery 分割字符串

    JQuery 分割字符串 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...