当前位置: 安卓之星 -> 安卓开发 -> 用 jpush-react-native 插件快速集成推送功能

用 jpush-react-native 插件快速集成推送功能

作者:网络 发表于: 2017-03-24 点击: 384 次

概述

jpush-react-native 是极光推送官方开发的 React Native 版本插件,可以快速集成推送功能。现在最新版本的 JPush SDK 分离了 JPush 及 JCore,让开发者可以分开集成 JMessage 及 JPush(以前 JMessage 包含了 JPush)。下面就来具体说一下如何快速集成以及使用 jpush-react-native 插件。

安装

打开终端,进入项目文件夹,执行以下命令:
npm install jpush-react-native –save
npm install jcore-react-native –save
react-native link
执行完 link 项目后可能会出现报错,这没关系,需要手动配置一下 build.gradle 文件。在 Android Studio 中打开你的项目,然后找到 app 或者你自己定义的需要集成 jpush-react-native 的模块,打开此模块下的 build.gradle 文件,做以下改动:
app/build.gradle
android {
    …
    defaultConfig {
        applicationId “com.pushdemo” // 此处改成你在极光官网上申请应用时填写的包名
        …
        manifestPlaceholders = [
                JPUSH_APPKEY: “d4ee2375846bc30fa51334f5”,   //在此替换你的APPKey
                APP_CHANNEL: “developer-default”        //应用渠道号
        ]
    }
}
检查一下在 dependencies 中有没有加入 jpush-react-native 以及 jcore-react-native 这两个依赖,如果没有,则需要加上:
dependencies {
    …
    compile project(‘:jpush-react-native’)
    compile project(‘:jcore-react-native’)
    …
}
接下来打开项目的 settings.gradle,看看有没有包含 jpush-react-native 以及 jcore-react-native,如果没有,则需要加上:
include ‘:app’, ‘:jpush-react-native’, ‘:jcore-react-native’
project(‘:jpush-react-native’).projectDir = new File(rootProject.projectDir, ‘../node_modules/jpush-react-native/android’)
project(‘:jcore-react-native’).projectDir = new File(rootProject.projectDir, ‘../node_modules/jcore-react-native/android’)

jpush-react-native-android

接下来打开模块的 MainApplication.java 文件,加入 JPushPackage:

app/src…/MainApplication.java

 private boolean SHUTDOWN_TOAST = false;
    private boolean SHUTDOWN_LOG = false;

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }


        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    //加入 JPushPackage
                    new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
            );
        }
    };

然后在 MainActivity 中加入一些初始化代码即可:

app/src…/MainActivity.java

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);
    }
}

这样就完成了所有的配置。接下来就可以在 JS 中调用插件提供的 API 了。

使用

收到推送

添加了此事件后,在收到推送时将会触发此事件。

example/react-native-android/push_activity.js

import JPushModule from ‘jpush-react-native’;

export default class PushActivity extends React.Component {
    componentDidMount() {
        JPushModule.addReceiveNotificationListener((map) => {
            console.log(“alertContent: ” + map.alertContent);
            console.log(“extras: ” + map.extras);
            // var extra = JSON.parse(map.extras);
            // console.log(extra.key + “: ” + extra.value);
        });
}

点击推送

在用户点击通知后,将会触发此事件。

componentDidMount() {
    JPushModule.addReceiveOpenNotificationListener((map) => {
            console.log(“Opening notification!”);
            console.log(“map.extra: ” + map.key);
        });
}

高级应用

修改 JPushModule 中收到点击通知的事件,可以自定义用户点击通知后跳转的界面(现在默认是直接启动应用),只需要修改一点点原生的代码:
jpush-react-native/src…/JPushModule.java

// 这里点击通知跳转到指定的界面可以定制化一下
} else if (JPushInterface.ACTION_NOTIFICATION_OPENED.equals(data.getAction())) {
    ...
    // judge if application is running in background, opening initial Activity. 
    // You can change here to open appointed Activity. All you need to do is create
    // the appointed Activity, and use JS render the appointed Activity.
    // Please reference examples' SecondActivity for detail,
    // and JS files are in folder: example/react-native-android
    if (isApplicationRunningBackground(context)) {
        Intent intent = new Intent();
        // 修改此处跳转的界面,比如改成 demo 中的 SecondActivity
        intent.setClass(context, mModule.mContext.getClass());
        Logger.d(TAG, "context.getClass: " + mModule.mContext.getClass());
        intent.putExtras(bundle);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK
                                | Intent.FLAG_ACTIVITY_CLEAR_TOP);
        context.startActivity(intent);
        // application running in foreground, do nothing
    }
}

如果修改了此处跳转的界面,需要在 Native 中声明一个 Activity,如 demo 中的 SecondActivity,而 SecondActivity 的界面仍然用 JS 来渲染。只需要改动一下 SecondActivity,让它继承自 ReactActivity 即可:
example/android/app/src…/SecondActivity.java
public class SecondActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return “SecondActivity”;
    }
}
然后使用上面返回的字符串注册一个 Component 即可:
example/react-native-android/second.js

import React from 'react';
import ReactNative from 'react-native';

const {
  AppRegistry,
  Text,
} = ReactNative;


export default class second extends React.Component { 
    constructor(props) { 
        super(props); 
    } 

    render() { 
      return (
        <Text> Welcome ! </Text>   
      );
    } 
}

AppRegistry.registerComponent('SecondActivity', () => second);

这样就完成了用户点击通知后的自定义跳转界面。

接收自定义消息

在用户收到自定义消息后触发。
example/react-native-android/push_activity.js
 …
    componentDidMount() {
        JPushModule.addReceiveCustomMsgListener((map) => {
            this.setState({
                pushMsg: map.message
            });
            console.log(“extras: ” + map.extras);
        });

得到 REGISTRATIONID

用户注册成功后(一般在用户启动应用后),如果订阅了这个事件,将会收到这个 registrationId。

    componentDidMount() {
        JPushModule.addGetRegistrationIdListener((registrationId) => {
            console.log(“Device register succeed, registrationId ” + registrationId);
        });
    }

清除所有通知

建议在用户退出前台后调用。
    …
    componentWillUnmount() {
        console.log(“Will clear all notifications”);
        JPushModule.clearAllNotifications();
    }

设置标签

example/react-native-android/set_activity.js
    …
    setTag() {
        if (this.state.tag !== undefined) {
            /*
            * 请注意这个接口要传一个数组过去,这里只是个简单的示范
            */      
            JPushModule.setTags([“VIP”, “NOTVIP”], () => {
                console.log(“Set tag succeed”);
            }, () => {
                console.log(“Set tag failed”);
            });
        }
    }

设置别名

    …
    setAlias() {
        if (this.state.alias !== undefined) {
            JPushModule.setAlias(this.state.alias, () => {
                console.log(“Set alias succeed”);
            }, () => {
                console.log(“Set alias failed”);
            });
        }
    }
以上就是插件提供的主要接口的示例。总的来说,配置和使用都比较简单,适合开发者快速集成推送功能。

相关文章

相关文章

赶快留言冒泡

  • 评论 (0)
  • 引用通告 (0)
目前还没有任何评论.
目前还没有任何Trackbacks和Pingbacks.
吐个泡浮上去.