react-native消息推送实现方式

更新时间：2023年02月18日 16:06:41 作者：前端阿皓

这篇文章主要介绍了react-native消息推送实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

react-native极光推送

先去官网注册：https://www.jiguang.cn并创建应用

一、安装插件

jpush-react-native是极光推送官方开发的 React Native 版本插件，用于消息推送。

注意：如果项目里没有jcore-react-native，需要安装

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

二、配置

安卓配置

1、修改android/app/build.gradle文件

android {
      defaultConfig {
          applicationId "yourApplicationId"           //在此替换你的应用包名
          ...
          manifestPlaceholders = [
                  JPUSH_APPKEY: "yourAppKey",         //在此替换你的APPKey
                  JPUSH_CHANNEL: "developer-default"        //在此替换你的channel，也可使用默认的
          ]
      }
  }

dependencies {
      ...
      implementation project(':jpush-react-native')  // 添加 jpush 依赖
      implementation project(':jcore-react-native')  // 添加 jcore 依赖
  }

2、在android/setting.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')

3、在android/app/src/main/AndroidManifest.xml文件添加如下代码：

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

IOS配置

1、切换到ios目录下，Pod方式

pod install
//注意：如果项目里使用pod安装过，请先执行命令
pod deintegrate

2、手动方式

Libraries
Add Files to “your project name”
node_modules/jcore-react-native/ios/RCTJCoreModule.xcodeproj
node_modules/jpush-react-native/ios/RCTJPushModule.xcodeproj

Capabilities
Push Notification — ON

Build Settings
All — Search Paths — Header Search Paths — +
$(SRCROOT)/…/node_modules/jcore-react-native/ios/RCTJCoreModule/
$(SRCROOT)/…/node_modules/jpush-react-native/ios/RCTJPushModule/

Build Phases
libz.tbd
libresolv.tbd
UserNotifications.framework
libRCTJCoreModule.a
libRCTJPushModule.a

三、使用

import React from 'react';
import {StyleSheet, Text, View, TouchableHighlight} from 'react-native';
import JPush from 'jpush-react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    setBtnStyle: {
        width: 320,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 10,
        borderWidth: 1,
        borderColor: '#3e83d7',
        borderRadius: 8,
        backgroundColor: '#3e83d7',
        padding: 10
    },
    textStyle: {
        textAlign: 'center',
        fontSize: 25,
        color: '#ffffff'
    }
});

class Button extends React.Component {
    render() {
        return <TouchableHighlight
            onPress={this.props.onPress}
            underlayColor='#e4083f'
            activeOpacity={0.5}
        >
            <View
                style={styles.setBtnStyle}>
                <Text
                    style={styles.textStyle}>
                    {this.props.title}
                </Text>
            </View>
        </TouchableHighlight>
    }
}

export default class App extends React.Component {

    constructor(props) {
        super(props);
    }

    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);
    }

    render() {
        return (
            <View style={styles.container}>
                <Button title="setLoggerEnable"
                        onPress={() => JPush.setLoggerEnable(true)
                        }/>

                <Button title="getRegisterID"
                        onPress={() => JPush.getRegistrationID(result =>
                            console.log("registerID:" + JSON.stringify(result))
                        )}/>

                {/*<Button title="addTags"
                        onPress={() => JPush.addTags({sequence: 1, tags: ["1", "2", "3"]})}/>
                <Button title="updateTags"
                        onPress={() => JPush.updateTags({sequence: 2, tags: ["4", "5", "6"]})}/>
                <Button title="deleteTag"
                        onPress={() => JPush.deleteTag({sequence: 3, tags: ["4", "5", "6"]})}/>
                <Button title="deleteTags"
                        onPress={() => JPush.deleteTags({sequence: 4})}/>
                <Button title="queryTag"
                        onPress={() => JPush.queryTag({sequence: 4, tag: "1"})}/>
                <Button title="queryTags"
                        onPress={() => JPush.queryTags({sequence: 5})}/>
                <Button title="setAlias"
                        onPress={() => JPush.setAlias({sequence: 6,alias:"xxx"})}/>
                <Button title="deleteAlias"
                        onPress={() => JPush.deleteAlias({sequence: 7})}/>
                <Button title="queryAlias"
                        onPress={() => JPush.queryAlias({sequence: 8})}/>
                <Button title="setMobileNumber"
                        onPress={() => JPush.setMobileNumber({mobileNumber: "13888888888"})}/>
                //仅ios
                <Button title="setBadge"
                        onPress={() => JPush.setBadge({"badge":1,"appBadge":1})}/>
                <Button title="initCrashHandler"
                        onPress={() => JPush.initCrashHandler()}/>
                <Button title="addLocalNotification"
                        onPress={() => JPush.addLocalNotification({
                            messageID: "123456789",
                            title: "title123",
                            content: "content123",
                            extras: {"key123": "value123"}
                        })}/>
                <Button title="removeLocalNotification"
                        onPress={() => JPush.removeLocalNotification({messageID: '123456789'})}/>*/}

            </View>
        );
    }

}

----------------大功告成啦-----------------------------

更多配置信息以及使用可见GitHub:https://github.com/jpush/jpush-react-native

解决ios角标无法清除

1.修改 node_modules/jpush-react-native/ios/RCTJPushModule/RCTJPushModule.m文件

RCT_EXPORT_METHOD(setBadge:(NSDictionary *)params)
{
    if(params[BADGE]){
        NSNumber *number = params[BADGE];
        [UIApplication sharedApplication].applicationIconBadgeNumber = [number integerValue]; // 增加这句
        [JPUSHService setBadge:[number integerValue]];
    }
}

2.使用手动清除

JPush.setBadge({badge: 0})

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解React路由传参方法汇总记录
这篇文章主要介绍了详解React路由传参方法汇总记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
react实现可播放的进度条
这篇文章主要为大家详细介绍了react实现可播放的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
React Umi国际化配置方法
这篇文章主要介绍了React Umi国际化配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-04-04
react.js CMS 删除功能的实现方法
下面小编就为大家带来一篇react.js CMS 删除功能的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
create-react-app使用antd按需加载的样式无效问题的解决
这篇文章主要介绍了create-react-app使用antd按需加载的样式无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
React中redux的使用详解
Redux 是一个状态管理库,它可以帮助你管理应用程序中的所有状态,Redux的核心概念之一是Store,它表示整个应用程序的状态,这篇文章给大家介绍React中redux的使用,感兴趣的朋友一起看看吧
2023-12-12
用React-Native+Mobx做一个迷你水果商城APP(附源码)
这篇文章主要介绍了用React-Native+Mobx做一个迷你水果商城APP,功能需要的朋友可以参考下
2017-12-12
react中context传值和生命周期详解
这篇文章主要介绍了react中context传值和生命周期,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
基于PixiJS实现react图标旋转动效
PixiJS是一个开源的基于web的渲染系统，为游戏、数据可视化和其他图形密集型项目提供了极快的性能，这篇文章主要介绍了用PixiJS实现react图标旋转动效,需要的朋友可以参考下
2022-05-05
React18从0实现dispatch update流程
这篇文章主要为大家介绍了React18从0实现dispatch update流程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01