为什么选用极光？因为这个 jpush-react-native 是极光官网维护的 ，而且关于原生方面配置也不是很多，方便搞前端从事RN的同学使用。
官网注册 账号https://www.jiguang.cn/，获取 AppKey
image.png
自动link配置
npm install jpush-react-native --save
rnpm link jpush-react-native
我这里报错了 需要 link jcore-react-native
Project :app declares a dependency from configuration 'compile' to configuration 'default' which is not declared in the descriptor for project :jcore-react-native.
执行完 link 项目后可能会出现报错，需要手动配置一下 build.gradle 文件。
如果没有 手动加上
image.png
image.png
image.png
在AndroidManifest 添加
<meta-data
android:name="JPUSH_APPKEY"
android:value="${JPUSH_APPKEY}" />
<meta-data
android:name="JPUSH_CHANNEL"
android:value="${APP_CHANNEL}" />
配置好后 sync 同步 一下项目， jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了。
在app 下的 MainApplication.java 文件，加入 JPushPackage
import cn.jpush.reactnativejpush.JPushPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
.....
new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
//注意 在 MainApplication类下要定义 这两个变量 在下图位置
private boolean SHUTDOWN_TOAST = false;
private boolean SHUTDOWN_LOG = false;
);
}
image.png
在 MainActivity.java下添加如下代码 别忘记导入包
import cn.jpush.android.api.JPushInterface;
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();
}
Android 配置到这里已经完成，然后就是RN 中的使用
在我们工程的根目录下
componentDidMount(){
// 接收自定义消息
JPushModule.addReceiveCustomMsgListener((message) => {
console.log("message :" + JSON.stringify(message))
});
// 接收推送通知
JPushModule.addReceiveNotificationListener((message) => {
//这种情况 是一般 我们app处于运行状态 下会触发
console.log("接受通知: " + JSON.stringify(message));
});
// 打开通知
JPushModule.addReceiveOpenNotificationListener((map) => {
console.log("打开通知!");
//这里的 map.extras //可选设置的键值对
//map.alertContent //推送的消息内容
//ios 是 alert
console.log(JSON.stringify(map))
console.log("map.extra: " + map.extras);
// 在这里 就可以处理 我们的路由跳转了 根据 我们推送的时候 约定好的键值对
image.png
这里有个可选项 可以判断我们的路由跳转等
image.png
这里我们只是手动发送推送，进行测试，还要服务层配合我们 后台集成推送 主动触发 。
android效果
ios端集成待更新
