React Native消息推送极光JPush

参考：

jpush-react-native
极光官网

安卓

yarn add jpush-react-native
yarn add jcore-react-native

1、创建应用

极光官网注册好账户后，点击创建应用，选择消息推送业务。
填写包名（找到android/app/src/main/AndroidManifest.xml里manifest标签的package）
点击下一步后出现如下界面：

可以先不管这些，你要用的只有底部的AppKey。

2、模块封装、初始化

封装一个jpush.ts模块文件：

import Jpush from 'jpush-react-native';
import configSecret from '@/config.secret'
import config from '@/config';

class JpushModule {
  public init = () => {
    if(config.ENV !== 'production') {  //根据自己设置的环境变量调整
      Jpush.setLoggerEnable(true);  //设置调试模式
    }

    Jpush.init({
      "appKey": configSecret.JPUSH_KEY_ANDROID,  //上面注册生成的AppKey
      "channel":"dev",
      //"titchannelle": 'dev',   //ts类型用的是titchannelle。。。明显是写错了，title里插了个channel
      "production":true,
    });

    //连接状态
    Jpush.addConnectEventListener(result => {
      console.log("connectListener:" + JSON.stringify(result))
    });

    //通知回调
    Jpush.addNotificationListener(result => {
      console.log("notificationListener:" + JSON.stringify(result))
    });

    //本地通知回调
    Jpush.addLocalNotificationListener(result => {
      console.log("localNotificationListener:" + JSON.stringify(result))
    });

    //自定义消息回调
    // Jpush.addCustomMessagegListener(result => {
    //   console.log("customMessageListener:" + JSON.stringify(result))
    // });

    //tag alias事件回调
    Jpush.addTagAliasListener(result => {
      console.log("tagAliasListener:" + JSON.stringify(result))
    });

    //手机号码事件回调
    Jpush.addMobileNumberListener(result => {
      console.log("mobileNumberListener:" + JSON.stringify(result))
    });
  }
}

const JPush = new JpushModule();
export default JPush;

然后在项目初始化的地方引用：

import JPush from '@/modules/jpush';
...
  componentDidMount() {
    JPush.init()
  }
...

3、代码配置

• android/app/build.gradle

  android {
        defaultConfig {
            applicationId "yourApplicationId"           //在此替换你的应用包名
            ...
            manifestPlaceholders = [
                    JPUSH_APPKEY: "yourAppKey",         //在此替换你的APPKey
                    JPUSH_CHANNEL: "yourChannel"        //在此替换你的channel
            ]
        }
    }
  
  

  dependencies {
        ...
        implementation project(':jpush-react-native')  // 添加 jpush 依赖
        implementation project(':jcore-react-native')  // 添加 jcore 依赖
    }
  
  

• android/settings.gradle

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

• android/app/src/main/AndroidManifest.xml

  <meta-data
      android:name="JPUSH_CHANNEL"
      android:value="${JPUSH_CHANNEL}" />
  <meta-data
      android:name="JPUSH_APPKEY"
      android:value="${JPUSH_APPKEY}" />    
  
  

后端推送测试成功，真机效果如下：

真机效果

IOS

https://www.jianshu.com/p/60d4542c1960
下次更新。。。