React Native Push Notification 入门教程：从零开始构建通知系统

React Native Push Notification 入门教程：从零开始构建通知系统

【免费下载链接】react-native-push-notification React Native Local and Remote Notifications 项目地址: https://gitcode.com/gh_mirrors/re/react-native-push-notification

React Native Push Notification 是一个强大的开源库，专门为 React Native 应用提供本地和远程通知功能支持。无论您是需要发送定时提醒、处理推送消息，还是构建复杂的通知交互系统，这个库都能帮助您快速实现跨平台的移动应用通知功能。

🎯 为什么选择 React Native Push Notification？

在移动应用开发中，通知功能是必不可少的。React Native Push Notification 提供了完整的解决方案：

• 跨平台支持：同时兼容 iOS 和 Android 系统
• 本地通知：无需服务器即可发送应用内通知
• 远程推送：通过 Firebase 等平台接收服务器推送
• 定时通知：支持设置未来时间发送通知
• 自定义交互：可以添加按钮和操作响应

📦 快速安装指南

使用 npm 安装

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

使用 yarn 安装

yarn add react-native-push-notification

重要提示：对于 iOS 平台，您还需要按照 PushNotificationIOS 的安装说明进行操作，因为此包依赖于它。

🔧 Android 配置步骤

要让通知功能正常工作，需要在 AndroidManifest.xml 文件中添加必要的权限和组件：

<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

<application ....>
    <meta-data android:name="com.dieam.reactnativepushnotification.notification_foreground"
                android:value="false"/>
    <meta-data android:name="com.dieam.reactnativepushnotification.notification_color"
                android:resource="@color/white"/>

    <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
    <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
    <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
        <intent-filter>
            <action android:name="android.intent.action.BOOT_COMPLETED" />
        </intent-filter>
    </receiver>

    <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
        android:exported="false" >
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>

🚀 基础使用示例

在应用的入口文件（通常是 index.js）中配置通知系统：

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

PushNotification.configure({
  onRegister: function (token) {
    console.log("TOKEN:", token);
  },

  onNotification: function (notification) {
    console.log("NOTIFICATION:", notification);
    
    // 处理通知点击等操作
    notification.finish(PushNotificationIOS.FetchResult.NoData);
  },

  onAction: function (notification) {
    console.log("ACTION:", notification.action);
  },

  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },

  popInitialNotification: true,
  requestPermissions: true,
});

📱 发送本地通知

发送即时通知非常简单：

PushNotification.localNotification({
  channelId: "your-channel-id",
  title: "通知标题",
  message: "通知内容",
  playSound: true,
  soundName: "default",
});

⏰ 定时通知功能

设置定时发送通知：

PushNotification.localNotificationSchedule({
  message: "定时通知内容",
  date: new Date(Date.now() + 60 * 1000), // 60秒后发送
  allowWhileIdle: false,
});

🎵 自定义通知声音

您可以为通知添加自定义声音：

• Android：将声音文件添加到 android/app/src/main/res/raw 目录
• iOS：将声音文件添加到 Xcode 项目的 Resources 中

然后在通知配置中指定：

soundName: 'my_custom_sound.mp3'

🔔 通知渠道管理（Android）

创建通知渠道：

import PushNotification, {Importance} from 'react-native-push-notification';

PushNotification.createChannel(
  {
    channelId: "channel-id",
    channelName: "我的通知渠道",
    channelDescription: "用于分类通知的渠道",
    importance: Importance.HIGH,
    vibrate: true,
  },
  (created) => console.log(`渠道创建状态: ${created}`)
);

注意：没有通知渠道，Android 上的通知将无法工作！

❌ 取消通知

取消特定通知：

PushNotification.localNotification({
  id: '123',
  message: "测试通知"
});

// 取消该通知
PushNotification.cancelLocalNotification('123');

💡 最佳实践建议

1. 配置位置：确保在组件生命周期外调用 .configure()
2. 权限处理：合理处理用户授权和权限请求
3. 用户体验：考虑通知的时机和频率
4. 错误处理：添加适当的错误处理机制

🎉 开始使用

现在您已经了解了 React Native Push Notification 的基础知识，可以开始为您的应用添加通知功能了！记住从简单的本地通知开始，逐步添加更复杂的功能。

通过这个库，您可以轻松构建功能丰富的通知系统，提升用户体验和应用价值。祝您开发顺利！ 🚀

【免费下载链接】react-native-push-notification React Native Local and Remote Notifications 项目地址: https://gitcode.com/gh_mirrors/re/react-native-push-notification