本地通知完全指南：使用 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 应用添加本地通知功能吗？React Native Push Notification 是一个强大的开源库，能够帮助你在 iOS 和 Android 平台上实现本地和远程通知功能。无论你是想提醒用户完成任务、推送重要信息还是增强用户体验，这个库都能完美满足你的需求。😊

📱 什么是本地通知？

本地通知是应用在本地生成并显示的提醒，无需服务器推送。它们非常适合：

• 定时提醒用户完成任务
• 显示应用内的本地事件通知
• 在特定时间触发重要提示
• 增强用户体验的交互式通知

🚀 快速安装步骤

安装 React Native Push Notification 非常简单：

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

或者使用 Yarn：

yarn add react-native-push-notification

重要提示：如果你的应用面向 iOS，还需要安装 PushNotificationIOS 依赖。

⚙️ Android 配置指南

为了让本地通知在 Android 上正常工作，需要在 AndroidManifest.xml 中添加必要的权限和配置：

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

<application>
  <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>

🔧 核心配置方法

在你的应用的入口文件（通常是 index.js）中添加配置：

PushNotification.configure({
  onRegister: function(token) {
    console.log("设备令牌:", token);
  },
  
  onNotification: function(notification) {
    console.log("收到通知:", notification);
    
    // 处理通知逻辑
  },
  
  onAction: function(notification) {
    console.log("用户操作:", notification.action);
  },
  
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },
  
  requestPermissions: true,
});

注意：不要在组件生命周期内调用 .configure() 方法！

📨 发送本地通知

发送一个简单的本地通知：

PushNotification.localNotification({
  channelId: "default-channel-id",
  title: "提醒通知",
  message: "这是你的本地通知消息！",
  playSound: true,
  soundName: "default",
});

⏰ 定时通知功能

想要在特定时间发送通知？试试定时通知：

PushNotification.localNotificationSchedule({
  message: "定时提醒消息",
  date: new Date(Date.now() + 60 * 1000), // 60秒后
  channelId: "default-channel-id",
});

🎯 通知频道管理（Android）

在 Android 8.0+ 上，你需要创建通知频道：

PushNotification.createChannel(
  {
    channelId: "default-channel-id",
    channelName: "默认频道",
    importance: Importance.HIGH,
    vibrate: true,
  },
  (created) => console.log(`频道创建状态: ${created}`)
);

🔔 通知处理技巧

当用户点击通知时，你可以通过 onNotification 回调来处理：

• 导航到特定页面
• 执行特定操作
• 更新应用状态

🛠️ 示例代码参考

项目中提供了完整的示例应用，你可以在 example/NotifService.js 中找到详细的实现示例。

💡 实用功能清单

✅ 本地通知发送 ✅ 定时通知设置
✅ 自定义通知声音 ✅ 通知频道管理 ✅ 通知权限处理 ✅ 通知取消功能

🎨 通知自定义选项

你可以自定义通知的：

• 标题和消息内容
• 声音和振动模式
• 图标和颜色
• 交互式操作按钮

📋 最佳实践建议

1. 权限处理：在请求通知权限前向用户说明用途
2. 用户体验：确保通知内容对用户有价值
3. 性能优化：合理使用定时通知，避免过多通知打扰用户

通过 React Native Push Notification 库，你可以轻松为应用添加专业的本地通知功能，提升用户体验和应用价值！✨

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