React Native集成JPush推送系统

嗯，我是最近才开始考虑加入推送通知功能的。。
大概是因为觉得有点难吧，后来发现在RN上实现起来竟然很简单！
那么我就简单地记录下笔记，提供给朋友们参考！

开始准备

我们首先要去注册一个jpush账号：https://www.jiguang.cn/
注册成功，在控制台点击左侧的[极光开发者服务]：

Screen Shot 2017-12-02 at 02.07.05.png

立即进入，然后就能创建应用啦！
写多了有点啰嗦，跳过。。

创建好应用，我们就开始进行配置吧！因为iOS还需要申请开发者证书后才能配置体验，所以我们这里先讲Android下的配置：
包名，在rn的android/app/build.gradle中的applicationId配置可以看到，记得不要写错了，写错了没关系，删除重新创建一个就好了～～

安装模块

在上述准备好之后，我们获得了一个极光推送的AppKey，这个待会会用到，我们首先安装好需要的模块：

$ cd rn-project-folder
$ npm i jcore-react-native -S
$ npm i jpush-react-native -S

提示：现在的rn版本都很新，所以我们就全部把必要的模块都装上好了。

配置模块

参考文档：https://github.com/jpush/jpush-react-native

$ npm run configureJPush  

说明：appKey为刚刚申请好的，后边的请勿理解高深，其实也就是rn目录下的android/${moduleName}/src而已，也就是默认的app，因为有的可能会修改过，不过大多数都是默认的吧，我们就直接填写app即可。

$ npm run configureJPush app-key app

然后link一下：

$ react-native link

最后，就是修改原生代码了。因为我们之前link过，所以只需要修改两处地方即可：

android/app/build.gradle

在android配置项下添manifestPlaceholders，只需要修改app-key即可：

android {
    defaultConfig {
        applicationId "yourApplicationId"
        ...
        manifestPlaceholders = [
                JPUSH_APPKEY: "yourAppKey", //在此替换你的APPKey
                APP_CHANNEL: "developer-default"    //应用渠道号
        ]
    }
}

android/app/src/main/java/com/xxx/MainApplication.java

主要就是添加JPush模块：

// 导入包
import cn.jpush.reactnativejpush.JPushPackage;


public class MainApplication extends Application implements ReactApplication {

  // 修改这里，添加两个配置，用于调试，自己看着false or true
  private boolean SHUTDOWN_TOAST = true;
  private boolean SHUTDOWN_LOG = true;

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
    @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          // 添加模块
          new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
      );
    }
...

最后，就是看看AndroidManifest.xml文件有没有加入如下代码：

提示：我们可以直接在这里修改appkey，就不用前边的配置了

使用推送

其实上边配置好了之后，我们后边只需要调用js方法就可以了！
流程很简单：注册通知服务，然后注册一个收到通知的处理方法！

  componentDidMount() {
    // 注意这里：官方的代码没有参数，不过会报错，所以加一个callback
    JPushModule.notifyJSDidLoad(ret => { console.log('initial!') });
    JPushModule.addReceiveCustomMsgListener((message) => {
      this.setState({pushMsg: message});
    });
    JPushModule.addReceiveNotificationListener((message) => {
      console.log("receive notification: " + message);
    })
  }

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