React Native Push Notification 完整安装指南：iOS 和 Android 双平台配置

React Native Push Notification 完整安装指南：iOS 和 Android 双平台配置

【免费下载链接】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 应用提供本地和远程推送通知功能。无论您是需要简单的提醒通知，还是复杂的定时推送功能，这个库都能轻松满足您的需求。本指南将带您完成在 iOS 和 Android 双平台上的完整安装配置流程，让您的应用具备专业的通知处理能力。💪

🔧 前置准备工作

在开始安装之前，请确保您的开发环境已正确配置：

• Node.js 和 npm 或 yarn 已安装
• React Native 项目已创建
• iOS 开发环境（Xcode、CocoaPods）
• Android 开发环境（Android Studio、SDK）

📦 快速安装步骤

1. 安装核心包

使用 npm 或 yarn 安装 react-native-push-notification：

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

或者：

yarn add react-native-push-notification

2. iOS 平台额外依赖

由于 iOS 平台的特殊性，您还需要安装 PushNotificationIOS：

npm install --save @react-native-community/push-notification-ios

🍎 iOS 平台配置详解

权限配置

在 iOS 项目中，您需要在 Info.plist 文件中添加通知权限：

<key>UIBackgroundModes</key>
<array>
    <string>remote-notification</string>
</array>

代码集成

在您的应用入口文件（通常是 index.js）中添加以下配置代码：

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

PushNotification.configure({
  onRegister: function (token) {
    console.log("设备令牌:", token);
  },
  
  onNotification: function (notification) {
    console.log("收到通知:", notification);
    notification.finish(PushNotificationIOS.FetchResult.NoData);
  },
  
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },
  
  popInitialNotification: true,
  requestPermissions: true,
});

🤖 Android 平台配置详解

AndroidManifest.xml 配置

在 android/app/src/main/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>
</application>

通知渠道创建

Android 8.0+ 要求所有通知都必须分配到特定的渠道：

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

🔔 基本通知功能实现

发送本地通知

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

定时通知设置

PushNotification.localNotificationSchedule({
  date: new Date(Date.now() + 60 * 1000), // 1分钟后
  message: "定时通知内容",
  userInfo: { id: '123' },
});

🛠️ 高级功能配置

通知操作按钮

为通知添加交互按钮，提升用户体验：

PushNotification.localNotification({
  actions: ["确认", "取消"],
  invokeApp: true,
});

自定义声音

在 Android 中，将自定义声音文件放置在 android/app/src/main/res/raw 目录下，然后在通知中指定：

soundName: 'my_custom_sound.mp3'

🎯 最佳实践建议

1. 配置位置选择

不要 在组件内部调用 .configure() 方法，应该在应用的第一个文件中配置，通常是 index.js。

2. 权限处理

在应用启动时检查通知权限，并根据需要请求用户授权。

3. 错误处理

为所有通知操作添加适当的错误处理逻辑。

4. 性能优化

合理使用通知渠道，避免创建过多的渠道影响性能。

🚀 测试与调试

测试本地通知

使用示例应用中的 NotifService.js 来测试通知功能：

const notifService = new NotifService(
  (token) => console.log('设备令牌:', token),
  (notification) => console.log('收到通知:', notification)
);

💡 常见问题解决

• iOS 通知不显示：检查证书配置和权限设置
• Android 通知渠道问题：确保在发送通知前已创建对应渠道
• 定时通知失效：确认 AndroidManifest.xml 配置正确

📈 总结

通过本指南，您已经学会了如何在 React Native 应用中完整配置和使用推送通知功能。从基础的安装到高级的功能实现，这个强大的通知库将为您的应用增添专业的通知处理能力。

记住：通知功能的正确配置对于提升用户体验至关重要。按照本指南的步骤操作，您将能够轻松实现跨平台的通知功能！🎉

如果您在配置过程中遇到任何问题，可以参考项目中的 trouble-shooting.md 文档，或者在社区中寻求帮助。祝您开发顺利！✨

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