react-native极光推送
先去官网注册: https://HdhCmsTestjiguang.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测试数据/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})
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
原文地址:https://blog.csdn.net/TanHao8/article/details/104682922
查看更多关于react-native消息推送实现方式的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did222357