React-Native + 极光推送

选择其原因

相对接入成本低、成熟度高、文档完善、推送渠道支持多、有自建社区、新版本更新及时、有一定的免费额度。

github 地址

自我使用总结

1. 安装

npm install jpush-react-native --save
npm install jcore-react-native --save

2. 配置

2.1 android

• 进入极光推送官网 注册账号
• 进入开发者平台 创建android应用 选择所需要的
  产品服务 设置应用包名为对应的项目anroid包名 提交并组装sdk
• 进入android/app/build.gradle 新增

android {
    ···
    defaultConfig {
         ...
         manifestPlaceholders = [
             JPUSH_APPKEY: "在此替换你的APPKey",         //APPKey（上一步创建应用对应的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 新增

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

2.2 IOS(暂未总结）

3. 基础react native 代码（在项目首页中执行）

import JPush from 'jpush-react-native';
// 可进入node_modules/jpush-react-native/index.js  针对项目需要查看具体方法 
componentDidMount() {
        JPush.init();
        //连接状态
        this.connectListener = result => {
            console.log("connectListener:" + JSON.stringify(result))
        };
        JPush.addConnectEventListener(this.connectListener);
        //通知回调
        this.notificationListener = result => {
            console.log("notificationListener:" + JSON.stringify(result))
        };
        JPush.addNotificationListener(this.notificationListener);
        //本地通知回调
        this.localNotificationListener = result => {
            console.log("localNotificationListener:" + JSON.stringify(result))
        };
        JPush.addLocalNotificationListener(this.localNotificationListener);
        //自定义消息回调
        this.customMessageListener = result => {
            console.log("customMessageListener:" + JSON.stringify(result))
        };
        JPush.addCustomMessagegListener(this.customMessageListener);
        //tag alias事件回调
        this.tagAliasListener = result => {
            console.log("tagAliasListener:" + JSON.stringify(result))
        };
        JPush.addTagAliasListener(this.tagAliasListener);
        //手机号码事件回调
        this.mobileNumberListener = result => {
            console.log("mobileNumberListener:" + JSON.stringify(result))
        };
        JPush.addMobileNumberListener(this.mobileNumberListener);
    }

4.消息推送（必须真机调试 模拟器调试获取不到设备id 无法成功调试 真机调试时候 应设置该设备允许通知）

进入开发者平台 选择发送通知 编辑消息 设置目标人群即可