jpush-react-native android端集成——个人记录

为什么选用极光？因为这个 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端集成待更新