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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

jslin_ 2018-07-06 18:24:00 浏览1340
展开阅读全文

为什么选用极光?因为这个 jpush-react-native 是极光官网维护的 ,而且关于原生方面配置也不是很多,方便搞前端从事RN的同学使用。
官网注册 账号https://www.jiguang.cn/,获取 AppKey

img_bc255e19d0a59cf68f40e93404a1f735.png
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 文件。
如果没有 手动加上


img_cc2cec9a33722f2228ba0e2928049bc7.png
image.png
img_79bd562a310cbe87bae74e61ff79fa85.png
image.png

img_048e1b403164906c5b34438ad72bec53.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;

      );
    }

img_183a2f76c71b9fd5cc0810db4fa49b09.png
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);

            // 在这里 就可以处理 我们的路由跳转了  根据 我们推送的时候 约定好的键值对
    

img_27b8bc11a3936da922c887f12cd7e619.png
image.png

这里有个可选项 可以判断我们的路由跳转等


img_25c719317a5081d856c20f5ec60853e0.png
image.png

这里我们只是手动发送推送,进行测试,还要服务层配合我们 后台集成推送 主动触发 。

img_ef67f9e329f17543d6f7bbfd0c337416.png
android效果

ios端集成待更新

网友评论

登录后评论
0/500
评论
jslin_
+ 关注