react-native消息推送實現(xiàn)方式

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

這篇文章主要介紹了react-native消息推送實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

react-native極光推送

先去官網(wǎng)注冊：https://www.jiguang.cn并創(chuàng)建應(yīng)用

一、安裝插件

jpush-react-native是極光推送官方開發(fā)的 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" ? ? ? ? ? //在此替換你的應(yīng)用包名
? ? ? ? ? ...
? ? ? ? ? manifestPlaceholders = [
? ? ? ? ? ? ? ? ? JPUSH_APPKEY: "yourAppKey", ? ? ? ? //在此替換你的APPKey
? ? ? ? ? ? ? ? ? JPUSH_CHANNEL: "developer-default" ? ? ? ?//在此替換你的channel，也可使用默認(rèn)的
? ? ? ? ? ]
? ? ? }
? }

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安裝過，請先執(zhí)行命令
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();
? ? ? ? //連接狀態(tài)
? ? ? ? this.connectListener = result => {
? ? ? ? ? ? console.log("connectListener:" + JSON.stringify(result))
? ? ? ? };
? ? ? ? JPush.addConnectEventListener(this.connectListener);
? ? ? ? //通知回調(diào)
? ? ? ? this.notificationListener = result => {
? ? ? ? ? ? console.log("notificationListener:" + JSON.stringify(result))
? ? ? ? };
? ? ? ? JPush.addNotificationListener(this.notificationListener);
? ? ? ? //本地通知回調(diào)
? ? ? ? this.localNotificationListener = result => {
? ? ? ? ? ? console.log("localNotificationListener:" + JSON.stringify(result))
? ? ? ? };
? ? ? ? JPush.addLocalNotificationListener(this.localNotificationListener);
? ? ? ? //自定義消息回調(diào)
? ? ? ? this.customMessageListener = result => {
? ? ? ? ? ? console.log("customMessageListener:" + JSON.stringify(result))
? ? ? ? };
? ? ? ? JPush.addCustomMessagegListener(this.customMessageListener);
? ? ? ? //tag alias事件回調(diào)
? ? ? ? this.tagAliasListener = result => {
? ? ? ? ? ? console.log("tagAliasListener:" + JSON.stringify(result))
? ? ? ? };
? ? ? ? JPush.addTagAliasListener(this.tagAliasListener);
? ? ? ? //手機(jī)號碼事件回調(diào)
? ? ? ? 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角標(biāo)無法清除

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.使用手動清除