React-Native使用極光進行消息推送

推送作為APP幾乎必備的功能,不論是什么產品都免不了需要消息推送功能,一般做RN開發的可能都是前端出身(比如我),關於android ios 都不是很懂😫,所以使用第三方推送插件是比較好的解決方案

​ 我選取了極光來集成推送服務的,按一些博客一步一步來的,React Native集成極光推送,基本沒有什么坑吧,但是寫的並不是完成正確

注冊極光賬號

極光官網

注冊完成后進入極光推送,然后創建應用

創建完成后將會獲得自己的AppKey

安裝極光SDK

這里可以看看官方github

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

檢查project/android/app/build.gradle

android {
    ...
    defaultConfig {
        applicationId "yourApplicationId" // (包名有用)在極光官網上申請應用時填寫的包名
        ...
        manifestPlaceholders = [
                JPUSH_APPKEY: "yourAppKey", //安裝的時候填寫這里無需改動
                APP_CHANNEL: "developer-default"    //應用渠道號, 默認即可
        ]
    }
}
...
dependencies {
	// ....
    compile project(':jpush-react-native')  // 添加 jpush 依賴
    compile project(':jcore-react-native')  // 添加 jcore 依賴
    // ....
}

進行推送設置

到此為止就完成了環境的配置,可以嘗試去進行推送了

成功啦!!

點擊推送

很多情況下,我們需要在應用內部進行消息的觸發,比如 新的消息 這就必須通過代碼進行觸發了

極光推送RN的API文檔

import React, { Component } from 'react'
import { Text, StyleSheet, View, Button } from 'react-native'
import JPushModule from 'jpush-react-native'
export default class ChatWith extends Component {
  constructor(props) {
    super(props)
  }
  componentDidMount() {
    // 初始化 JPush
    JPushModule.initPush()
	// 獲取當前極光開發者信息
    JPushModule.getInfo(map => {
      console.log(map)
    })
    // 點擊推送通知回調
    JPushModule.addReceiveOpenNotificationListener(map => {
      console.log('進行一系列操作')
      console.log('map.extra: ' + map)
      // 可執行跳轉操作，也可跳轉原生頁面 關於參數請看文檔
      // this.props.navigation.navigate("SecondActivity");
    })
    // 接收推送通知回調
    JPushModule.addReceiveNotificationListener(message => {
      console.log('receive notification: ', message)
    })
    //
  }

  render() {
    return (
      <View style={styles.containers}>
        <Button
          title="點擊推送"
          onPress={() => {
            // 推送事件 業務代碼 請提取到函數里面    
            JPushModule.sendLocalNotification({
              buildId: 1, // 設置通知樣式
              id: 5, // 通知的 id, 可用於取消通知
              extra: { key1: 'value1', key2: 'value2' }, // extra 字段 就是我們需要傳遞的參數
              fireTime: new Date().getTime(), // 通知觸發時間的時間戳（毫秒）
              badge: 8, // 本地推送觸發后應用角標的 badge 值 （iOS Only）
              subtitle: 'subtitle',  // 子標題 （iOS10+ Only）
              title: '通知',
              content: '您有未讀消息',
            })
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  containers: {
    paddingTop: 20
  }
})