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懒加载实现原理2022-11-11
这篇文章主要介绍了React实现爷孙组件间相互通信，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要介绍了React+Router多级导航切换路由方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了聊一聊我对 React Context 的理解以及应用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了React+Antd实现可增删改表格的示例，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
这篇文章主要为大家介绍了React 模式之纯组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
图片懒加载是一种优化网页性能的技术,它允许在用户滚动到图片位置之前延迟加载图片,通过懒加载,可以在用户需要查看图片时才加载图片,避免了不必要的图片加载,本文给大家介绍了React实现图片懒加载的常见方式,需要的朋友可以参考下2024-01-01
作为一个前端开发时刻想着，怎么把自己写的东西，丢到自己的服务器上面，然后展示给别人看。下面我就简单直白的写下，这篇文章主要给大家介绍了关于nginx配置React静态页面的方法教程,需要的朋友可以参考下。2017-11-11
这篇文章主要为大家详细介绍了React实现评论的添加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了如何在react项目中做公共配置文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论