极光官方针对react native提供了jpush-react-native库。
github：https://github.com/jpush/jpush-react-native
本文主要记录集成过程，及对一些API进行介绍。
集成jpush-react-native
安装
npm install jpush-react-native jcore-react-native --save
或
yarn add jpush-react-native
yarn add jcore-react-native
配置
通过主动配置和手动配置组合完成。
1.自动配置
react-native link
根据提示，输入 appKey (极光中该应用对应的key)等即可。
完成之后可查看结果：
app目录下的build.gradle
android {
defaultConfig {
...
manifestPlaceholders = [//新添加
JPUSH_APPKEY: "bc4d4bac9***c58784e913b",
APP_CHANNEL : "default"
]
}
}
dependencies {
compile project(':jcore-react-native')//新添加
compile project(':jpush-react-native')//新添加
compile fileTree(dir: "libs", include: ["*.jar"])
...
}
setting.gradle
include ':jcore-react-native'
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')
include ':jpush-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')
include ':app'
AndroidManifest.xml
//新增
2.手动配置
在MainApplication.java文件中，添加JPushPackage
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new JPushPackage(SHUTDOWN_TOAST,SHUTDOWN_LOG)
);
}
其中接收两个参数，都是boolean量，分别表示是否关闭toast和log功能。生产包需设置为true。
在MainActivity文件中添加配置：
@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);
}
使用JPushModule
import JPushModule from 'jpush-react-native'
通过JPushModule调用响应的API。
componentDidMount() {
if (Platform.OS === 'android') {
JPushModule.initPush()
JPushModule.getInfo(map => {
this.setState({
appkey : map.myAppKey,
imei : map.myImei,
package : map.myPackageName,
deviceId : map.myDeviceId,
version : map.myVersion
})
})
//v1.6.6 版本以后，增加了 notifyJSDidLoad 方法，在监听所有相关事件之前要调用此方法，否则不会收到点击通知事件。（only android）
JPushModule.notifyJSDidLoad(resultCode => {
if (resultCode === 0) {
}
})
}else if(Platform.OS === 'ios'){
JPushModule.setupPush()
}
//接收自定义消息监听
JPushModule.addReceiveCustomMsgListener(map => {
this.setState({
pushMsg: map.message
})
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.key);
console.log("map: " + map);
this.jumpSecondActivity()
})
//获取注册id监听
JPushModule.addGetRegistrationIdListener(registrationId =>{
console.log('Device register succeed, registrationId ' + registrationId)
})
// var notification = {
// buildId: 1,
// id: 5,
// title: 'jpush',
// content: 'This is a test!!!!',
// extra: {
// key1: 'value1',
// key2: 'value2'
// },
// fireTime: 2000
// }
// JPushModule.sendLocalNotification(notification)
};
//事件String指定，不可更改
const receiveCustomMsgEvent = 'receivePushMsg'
const receiveNotificationEvent = 'receiveNotification'
const openNotificationEvent = 'openNotification'
const getRegistrationIdEvent = 'getRegistrationId'
//移除监听
componentWillUnmount () {
JPushModule.removeReceiveCustomMsgListener(receiveCustomMsgEvent)
JPushModule.removeReceiveNotificationListener(receiveNotificationEvent)
JPushModule.removeReceiveOpenNotificationListener(openNotificationEvent)
JPushModule.removeGetRegistrationIdListener(getRegistrationIdEvent)
console.log('Will clear all notifications')
JPushModule.clearAllNotifications()
}
API
#初始化JPush 必须先初始化才能执行其他操作（only android）
initPush
getInfo
#执行该方法后，无法接收到通知
stopPush
#stopPush后，执行该方法，可接收通知（only android）
resumePush
#参数是func，func的参数是registrationId
getRegistrationID
#设置标签
setTags
#添加标签
addTags
#删除标签
deleteTags
#检查标签的状态
checkTagBindState
#清除所有标签
cleanTags
#设置别名
setAlias
#删除别名
deleteAlias
#获取别名
getAlias
#通知栏样式：Basic
setStyleBasic
#通知栏样式：Custom
setStyleCustom
具体使用可参考官方demo。更多方法可查看源文件：jpush-react-native/index.js
如有错误，请多指教，相互学习。