react-native 极光推送(jpush-react-native)
极光推送官方支持的 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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
1
2
3
4
5
6
7
|
... 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
1
2
3
|
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
1
2
3
4
5
6
7
|
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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
1234567891011121314151617181920public
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
1234567891011121314151617...
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);
});
}
点击通知
在用户点击通知后,将会触发此事件。
1234567...
componentDidMount() {
JPushModule.addReceiveOpenNotificationListener((map) => {
console.log(
"Opening notification!"
);
console.log(
"map.extra: "
+ map.key);
});
}
得到 REGISTRATIONID
用户注册成功后(一般在用户启动应用后),如果订阅了这个事件,将会收到这个 registrationId。
123456...
componentDidMount() {
JPushModule.addGetRegistrationIdListener((registrationId) => {
console.log(
"Device register succeed, registrationId "
+ registrationId);
});
}
清除所有通知
建议在用户退出前台后调用。
12345...
componentWillUnmount() {
console.log(
"Will clear all notifications"
);
JPushModule.clearAllNotifications();
}
设置标签
example/react-native-android/set_activity.js
12345678910111213...
setTag() {
if
(
this
.state.tag !== undefined) {
/*
* 请注意这个接口要传一个数组过去,这里只是个简单的示范
*/
JPushModule.setTags([
"VIP"
,
"NOTVIP"
], () => {
console.log(
"Set tag succeed"
);
}, () => {
console.log(
"Set tag failed"
);
});
}
}
设置别名
12345678910...
setAlias() {
if
(
this
.state.alias !== undefined) {
JPushModule.setAlias(
this
.state.alias, () => {
console.log(
"Set alias succeed"
);
}, () => {
console.log(
"Set alias failed"
);
});
}
}
最新文章
- centos 6.8 安装 nginx-1.11.4
- php对象引用和析构函数的关系
- MYSQL - ORDER BY &; LIMIT
- 文字排版--字体(font-family)
- cf C. Hamburgers
- 细说PHP优化那些事
- maven GroupID和ArtifactID填什么
- http协议的状态码 403 404 301 302 200 500 502 504 报错显示
- 使用PHP二维码生成类库PHP QR Code生成二维码
- year:2017 month:7 day:17
- ZOJ 2859 二维RMQ(模板)
- 换行符\n和回车符\r
- Thread类的其他方法,同步锁,死锁与递归锁,信号量,事件,条件,定时器,队列,Python标准模块--concurrent.futures
- 网络知识 - 简易的自定义Web服务器
- PHP安装linux
- SVM、LR、决策树的对比
- 4、lvs nat和dr类型演示
- Mybatis中resultType理解
- http server 简单实现
- [转]MySQL update join语句
热门文章
- log4j配置文件动态指定日志文件名称
- Appium+python自动化22-Appium Desktop【转载】
- Jekyll搭建个人博客
- 【原创】DataPackage-数据库、表的区域设置和系统不一致导致处理失败
- Vue v-for嵌套数据渲染问题
- 跨集群拷贝hdfs
- Python的网络编程[4] ->; DHCP 协议[0] ->; DHCP 的基本理论
- 大数据技术之_16_Scala学习_09_函数式编程-高级
- Xamarin XAML语言教程构建进度条ProgressBar
- Map泛型集合-输入名字输出成绩