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 無法成功調試 真機調試時候 應設置該設備允許通知）

進入開發者平臺 選擇發送通知 編輯消息 設置目標人羣即可