RN雷射推送

https://www.jianshu.com/p/3885c96ba20f

極光官方針對react native提供了jpush-react-native庫。

github：https://github.com/jpush/jpush-react-native

本文主要記錄內建過程，及對一些API進行介紹。

內建jpush-react-native

安裝

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

或

yarn add jpush-react-native

yarn add jcore-react-native

配置

通過主動配置和手動配置組合完成。

1.自動配置

react-native link

根據提示，輸入 appKey (極光中該應用對應的key)等即可。

完成之後可檢視結果：

app目錄下的build.gradle

android {

    defaultConfig {
        ...
        manifestPlaceholders = [//新添加
                JPUSH_APPKEY: "bc4d4bac9***c58784e913b",
                APP_CHANNEL : "default"
        ]

    }
}
dependencies {
    compile project(':jcore-react-native')//新添加
    compile project(':jpush-react-native')//新添加
    compile fileTree(dir: "libs", include: ["*.jar"])
    ...
}
           

setting.gradle

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

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

include ':app'
           

AndroidManifest.xml

<application
      ...>
     //新增
    <meta-data
        android:name="JPUSH_APPKEY"
        android:value="${JPUSH_APPKEY}" />
    //新增
    <meta-data
        android:name="JPUSH_CHANNEL"
        android:value="${APP_CHANNEL}" />

</application>
           

2.手動配置

在MainApplication.java檔案中，添加JPushPackage

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new JPushPackage(SHUTDOWN_TOAST,SHUTDOWN_LOG)
      );
    }
           

其中接收兩個參數，都是boolean量，分别表示是否關閉toast和log功能。生産包需設定為true。

在MainActivity檔案中添加配置：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        JPushInterface.init(this);
    }

    @Override
    protected void onPause() {
        super.onPause();
        JPushInterface.onPause(this);
    }

    @Override
    protected void onResume() {
        super.onResume();
        JPushInterface.onResume(this);
    }
           

使用JPushModule

import JPushModule from 'jpush-react-native'

通過JPushModule調用響應的API。

componentDidMount() {

        if (Platform.OS === 'android') {
            JPushModule.initPush()
            JPushModule.getInfo(map => {
                this.setState({
                    appkey : map.myAppKey,
                    imei : map.myImei,
                    package : map.myPackageName,
                    deviceId : map.myDeviceId,
                    version : map.myVersion
                })
            })
            //v1.6.6 版本以後，增加了 notifyJSDidLoad 方法，在監聽所有相關事件之前要調用此方法，否則不會收到點選通知事件。（only android）
            JPushModule.notifyJSDidLoad(resultCode => {
                if (resultCode === 0) {
                }
            })
        }else if(Platform.OS === 'ios'){
            JPushModule.setupPush()
        }
        //接收自定義消息監聽
        JPushModule.addReceiveCustomMsgListener(map => {
            this.setState({
                pushMsg: map.message
            })
            console.log('extras: ' + map.extras)
        })
        //接收通知監聽
        JPushModule.addReceiveNotificationListener((map) => {
            console.log("alertContent: " + map.alertContent);
            console.log("extras: " + map.extras);
        })

        //在使用者點選通知後，将會觸發此事件
        JPushModule.addReceiveOpenNotificationListener((map) => {
            console.log("Opening notification!");
            console.log("map.extra: " + map.key);
            console.log("map: " + map);
            this.jumpSecondActivity()
        })
        //擷取注冊id監聽
        JPushModule.addGetRegistrationIdListener(registrationId =>{
            console.log('Device register succeed, registrationId ' + registrationId)
        })

        // var notification = {
        //   buildId: 1,
        //   id: 5,
        //   title: 'jpush',
        //   content: 'This is a test!!!!',
        //   extra: {
        //     key1: 'value1',
        //     key2: 'value2'
        //   },
        //   fireTime: 2000
        // }
        // JPushModule.sendLocalNotification(notification)

    };

    //事件String指定，不可更改
    const receiveCustomMsgEvent = 'receivePushMsg'
    const receiveNotificationEvent = 'receiveNotification'
    const openNotificationEvent = 'openNotification'
    const getRegistrationIdEvent = 'getRegistrationId'

    //移除監聽
    componentWillUnmount () {
        JPushModule.removeReceiveCustomMsgListener(receiveCustomMsgEvent)
        JPushModule.removeReceiveNotificationListener(receiveNotificationEvent)
        JPushModule.removeReceiveOpenNotificationListener(openNotificationEvent)
        JPushModule.removeGetRegistrationIdListener(getRegistrationIdEvent)
        console.log('Will clear all notifications')
        JPushModule.clearAllNotifications()
    }
           

API

#初始化JPush 必須先初始化才能執行其他操作（only android）
initPush

getInfo

#執行該方法後，無法接收到通知
stopPush

#stopPush後，執行該方法，可接收通知（only android）
resumePush

#參數是func，func的參數是registrationId
getRegistrationID

#設定标簽
setTags

#添加标簽
addTags

#删除标簽
deleteTags

#檢查标簽的狀态
checkTagBindState

#清除所有标簽
cleanTags

#設定别名
setAlias

#删除别名
deleteAlias

#擷取别名
getAlias

#通知欄樣式：Basic
setStyleBasic

#通知欄樣式：Custom
setStyleCustom
           

具體使用可參考官方demo。更多方法可檢視源檔案：jpush-react-native/index.js

如有錯誤，請多指教，互相學習。

作者：boyrt

連結：https://www.jianshu.com/p/3885c96ba20f

來源：簡書

簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。