ReactNative开发-集成极光推送 jpush-react-native

前言

极光推送官方有提供支持React Native版本的插件（ios和android），可以快速集成推送功能。
目前只集成Android部分，ios因为需要Apple开发者账号（99美金一年），暂时没办法记录。

安装

打开终端，定位到React Native项目根目录下，执行：

$ npm install jpush-react-native --save
# jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native
$ npm install jcore-react-native --save

配置

$ react-native link jpush-react-native
$ react-native link jcore-react-native

这里注意下！！！

link失败也没事，可以手动进行配置。继续进行下面操作：

Android平台集成

1.在android studio打开React Native项目下的android文件夹，然后跟着以下路径打开build.gradle：

路径：android/app/build.gradle

2.修改build.gradle文件：

android {
    ...
    defaultConfig {
        applicationId "yourApplicationId" // 此处改成你在极光官网上申请应用时填写的包名
        ...
        manifestPlaceholders = [
                JPUSH_APPKEY: "yourAppKey", //在此替换你在极光官网上申请应用得到的APPKey
                APP_CHANNEL: "developer-default"    //应用渠道号, 默认即可
        ]
    }
}
...
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile project(':jpush-react-native')  // 添加 jpush 依赖
    compile project(':jcore-react-native')  // 添加 jcore 依赖
    compile "com.facebook.react:react-native:+"  // From node_modules
}

极光上申请得到的APPKey

极光上申请得到的applicationId

极光上申请得到的applicationId

3.打开settings.gradle

路径：android/settings.gradle

4.添加以下代码：

include ':jcore-react-native'
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')

include ':jpush-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')

settings.gradle完整代码

5.打开AndroidManifest.xml，添加：

AndroidManifest.xml完整代码

6.点击页面右上角Sync Now按钮，等待Android Studio编译成功过后，左侧的导航栏会多出两个包：

编译成功后引入的包

如果Sync失败，可以参考以下几点：

• 网络环境是否稳定
• 项目目录下的build:gradle文件里的gradle版本是否过低（个人使用3.1.4）

完整build:gradle代码

7.打开MainApplication.java

路径：app/src/java/…/MainApplication.java

引入JPushPackage包：

import cn.jpush.reactnativejpush.JPushPackage;

添加两个常量：

  // 设置为 true 将不弹出 toast
  private boolean SHUTDOWN_TOAST = false;
  // 设置为 true 将不打印 log
  private boolean SHUTDOWN_LOG = false;

然后在getPackages()方法里加入:

new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)

MainApplication.java完整代码

8.打开MainActivity.java

路径：app/src/java/…/MainActivity.java

引入JPushInterface：

import cn.jpush.android.api.JPushInterface;

添加以下4个方法：

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState, @Nullable PersistableBundle persistentState) {
        super.onCreate(savedInstanceState, persistentState);
        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();
    }

MainActivity.java完整代码

使用

现在就可以像使用第三方库一样，在需要用到的页面里添加以下代码：

import JPushModule from 'jpush-react-native';

...

componentDidMount() {
    // 新版本必需写回调函数
    // JPushModule.notifyJSDidLoad();
    JPushModule.notifyJSDidLoad((resultCode) => {
          if (resultCode === 0) {}
    });

    // 接收自定义消息
    JPushModule.addReceiveCustomMsgListener((message) => {
      this.setState({pushMsg: message});
    });
    // 接收推送通知
    JPushModule.addReceiveNotificationListener((message) => {
      console.log("receive notification: " + message);
    });
    // 打开通知
    JPushModule.addReceiveOpenNotificationListener((map) => {
      console.log("Opening notification!");
      console.log("map.extra: " + map.extras);
      // 可执行跳转操作，也可跳转原生页面
      // this.props.navigation.navigate("SecondActivity");
    });
  }

  componentWillUnmount() {
    JPushModule.removeReceiveCustomMsgListener();
    JPushModule.removeReceiveNotificationListener();
  }

配置好了后可以到极光上测试：

image.png

然后如果配置正确，打开手机上的app，就可以收到刚才的推送啦！

image