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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。