一.安装依赖
RN版本大于0.40.0
$ npm install jpush-react-native --save
// jpush-react-native 1.4.4 版本以后需要同时安装 jcore-react-native
$ npm install jcore-react-native --save
二.配置
终端link
$ react-native link jpush-react-native
$ react-native link jcore-react-native
文件修改
1.build.gradle
project/android/app/build.gradle
build.gradle文件里也含有添加的依赖
2.查看android文件下的settings.gradle文件是否有了一下内容
include ':jpush-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')
include ':jcore-react-native'
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')
3.检查一下 app 下的 AndroidManifest 配置,有没有增加 部分。
project/android/app/AndroidManifest.xml
路径或者是project/android/app/src/main/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>
亦可直接填写
4.打开 app 下的 MainApplication.java(可能在app/src文件) 文件,然后加入 JPushPackage
// 设置为 true 将不弹出 toast
private boolean SHUTDOWN_TOAST = false;
// 设置为 true 将不打印 log
private boolean SHUTDOWN_LOG = false;
5.在 MainActivity 中加入一些初始化代码即可
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);
}
@Override
protected void onDestroy() {
super.onDestroy();
}
}
报错的话可能没导入JPushInterface
import cn.jpush.android.api.JPushInterface;
这样就完成了所有的配置。接下来就可以在 JS 中调用插件提供的 API 了。
设置别名
//JPushModule.setAlias设置别名,方法内的第二参数必须是一个函数,不然会报错cd不是函数,因为JPush内封装setAlias第二个参数cd是一个函数
setAlias() {
if (this.state.alias !== undefined) {
JPushModule.setAlias(this.state.alias, () => {
console.log("Set alias succeed");
}, () => {
console.log("Set alias failed");
});
}
}
需要注意的是,v1.6.6 版本以后,增加了 notifyJSDidLoad 方法,在监听所有相关事件之前一定要调用此方法
componentDidMount() {
// 在收到点击事件之前调用此接口
JPushModule.notifyJSDidLoad((resultCode) => {
if (resultCode === 0) {
}
});
//这是默认的通知消息
JPushModule.addReceiveCustomMsgListener((message) => {
// this.setState({pushMsg:message});
});
//接收自定义推送通知
JPushModule.addReceiveNotificationListener((map) => {
console.log("alertContent: " + map.alertContent);
//extra是可选配置上的附件字段
var extra = JSON.parse(map.extras);
console.log(extra.key + ": " + extra.value);
});
// 用户点击通知后,将会触发此事件
JPushModule.addReceiveOpenNotificationListener((map) => {
console.log("Opening notification!");
console.log("map.extra: " + map.key);
// 可执行跳转操作,也可跳转原生页面
this.props.navigation.navigate("chatRoom");
});
}
componentWillUnmount() {
JPushModule.addReceiveCustomMsgListener();
JPushModule.addReceiveNotificationListener();
}
建议在用户退出前台后调用。
componentWillUnmount() {
console.log("Will clear all notifications");
JPushModule.clearAllNotifications();
}