当前位置：首页 > article >正文

React Native实现推送通知

article 2024/12/26 0:38:13

在React Native中实现推送通知通常需要使用特定的库来处理iOS和Android平台的通知服务。以下是一些常用的库和步骤，用于在React Native应用中实现推送通知功能：

常用库

react-native-push-notification - 一个跨平台的推送通知库，支持本地通知和远程通知。
@notifee/react-native - Notifee是一个现代化的通知库，提供了丰富的API来创建、显示和管理通知。
react-native-firebase - 如果你的应用已经在使用Firebase，那么可以利用Firebase Cloud Messaging (FCM) 来发送和接收推送通知。
极光推送 - 国内集成推送通知服务。

这里以react-native-push-notification和极光推送为例，说明如何设置推送通知的基本步骤。对于其他库，步骤会有所不同，但总体思路相似。

react-native-push-notification的实现步骤

安装依赖

首先，你需要安装react-native-push-notification库及其必要的原生依赖：

npm install --save react-native-push-notification

然后根据官方文档完成原生部分的配置。这可能包括修改Info.plist（iOS）或AndroidManifest.xml（Android）文件，并添加必要的权限声明。

配置Android

在android/app/build.gradle中添加Google Play服务依赖：

dependencies {
    implementation 'com.google.firebase:firebase-messaging:20.2.4'
}

在AndroidManifest.xml中添加相应的权限和服务声明。

配置iOS

确保你的项目已经启用了Push Notifications能力。
在Info.plist中添加UIBackgroundModes数组，并包含remote-notification值。
设置AppDelegate.m中的相关方法，如didRegisterForRemoteNotificationsWithDeviceToken等。

初始化库并注册通知

在你的React Native代码中初始化库，并注册设备以接收通知：

import PushNotification from "react-native-push-notification";

// 可选：配置通知选项
PushNotification.configure({
  // （可选）叫醒应用程序时调用的函数（仅限Android）
  onNotification: function(notification) {
    console.log("NOTIFICATION:", notification);
  },

  // （可选）用户点击通知后调用的函数
  onAction: function(notification) {
    console.log("ACTION:", notification.action);
    console.log("NOTIFICATION:", notification);
  },

  // （可选）注册成功后调用的函数
  onRegistrationError: function(error) {
    console.error(error.message, error);
  },

  // IOS only (optional): default: all - Permissions to register.
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },

  // 应该是应用程序启动后的第一个调用
  popInitialNotification: true,

  /**
   * （可选）此方法将被调用一次，当用户授权或拒绝了通知权限。
   * @param {boolean} enabled 是否启用通知
   */
  onPermission: function(enabled) {
    console.log("onPermission", enabled);
  },
});

// 请求通知权限
PushNotification.requestPermissions();

发送通知

你可以通过服务器端发送远程通知，或者使用库提供的方法发送本地通知。例如，发送一条本地通知：

PushNotification.localNotification({
  /* Android Only Properties */
  id: '0', // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID
  ticker: "My Notification Ticker", // (optional)
  autoCancel: true, // (optional) default: true
  largeIcon: "ic_launcher", // (optional) default: "ic_launcher"
  smallIcon: "ic_notification", // (optional) default: "ic_notification" with fallback for "ic_launcher"
  bigText: "My big text that will be shown when notification is expanded", // (optional) default: "message" prop
  subText: "This is a subText", // (optional) default: none
  color: "red", // (optional) default: system default
  vibrate: true, // (optional) default: true
  vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000
  tag: 'some_tag', // (optional) add tag to message
  group: "group", // (optional) add group to message
  ongoing: false, // (optional) set whether this is an "ongoing" notification

  /* iOS only properties */
  alertAction: "view", // (optional) default: view
  category: "", // (optional) default: empty string

  /* iOS and Android properties */
  title: "Local Notification", // (optional)
  message: "My Notification Message", // (required)
  playSound: false, // (optional) default: true
  soundName: 'default', // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. This will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played)
  number: '10', // (optional) Valid 32 bit integer specified as string. default: none (Cannot be zero)
});

以上就是使用react-native-push-notification库在React Native应用中实现推送通知的基本步骤。

‌React-Native极光推送

主要涉及注册极光账号、安装极光SDK、配置项目和推送设置等步骤‌。

注册与获取AppKey‌：在极光官网注册账号，创建应用后获取AppKey。
安装极光SDK‌：使用npm或yarn安装jcore-react-native和jpush-react-native依赖包。
配置项目‌：

对于Android项目，需要在AndroidManifest.xml中添加meta-data，并在build.gradle文件中配置AppKey和依赖。
对于iOS项目，需要在Xcode中添加相关库和配置，并在AppDelegate.m中注册推送服务。

推送设置‌：
在React-Native代码中引入JPushModule，并调用相关API进行推送设置，如初始化推送、获取注册ID、监听推送通知等。
以上就是使用极光推送在React Native应用中实现推送通知的基本步骤。请注意，极光推送的配置可能因React-Native版本和具体需求而有所不同，请参考极光官方文档和React-Native社区的相关资源。

如果你选择使用其他库，比如@notifee/react-native或react-native-firebase，则需要参照相应库的文档来进行配置。每个库都有详细的文档和示例代码，帮助你快速集成推送通知功能。

查看全文

http://www.kler.cn/a/321310.html