React Native本地通知重复显示两次问题排查求助

嗨，我帮你排查下这个通知重复弹出的问题，这在首次使用react-native-push-notification时挺常见的，大概率是初始化或者配置的小疏漏，我们一步步来解决：

最可能的原因：重复初始化了ReminderService #

你在App.js里实例化ReminderService，如果App组件因为state变化、父组件重渲染等原因重复执行初始化代码，就会多次调用constructor——每次都会重新配置PushNotification，还会触发一次showNotification，自然就弹出两次通知了。

解决办法：确保服务只初始化一次 #

有两种简单的方式实现：

1. 在App.js中用useEffect单例初始化
   利用React的useEffect空依赖数组特性，确保初始化逻辑只执行一次：

   import React, { useEffect } from 'react';
   import ReminderService from './path-to/ReminderService';
   
   function App() {
     useEffect(() => {
       // 只在组件挂载时初始化一次
       new ReminderService();
     }, []); // 空数组表示不依赖任何变量，仅执行一次
   
     return (
       // 你的App组件内容
     );
   }
   
   export default App;
   

2. 把ReminderService改成单例模式
   修改你的服务类，确保全局只有一个实例：

   import PushNotification from 'react-native-push-notification';
   
   class ReminderService {
     static instance = null;
   
     constructor() {
       // 如果已经有实例，直接返回，避免重复初始化
       if (ReminderService.instance) {
         return ReminderService.instance;
       }
       ReminderService.instance = this;
   
       PushNotification.configure({
         onRegister: function(token) {
           global.alert('TOKEN:', token);
         },
         onNotification: function(notification) {
           global.alert('NOTIFICATION:', notification);
         },
         permissions: {
           alert: true,
           badge: true,
           sound: true,
         },
         popInitialNotification: true,
         requestPermissions: true,
       });
       this.showNotification('Local notification', 'Not scheduled');
     }
   
     showNotification = (title, message) => {
       PushNotification.localNotification({
         title: title,
         message: message,
       });
     };
   }
   
   export default ReminderService;
   

其他可能的排查方向 #

• 检查是否重复配置了PushNotification：搜索整个项目，看看有没有其他地方也调用了PushNotification.configure，确保全局只配置一次。
• RN版本自动link冲突：如果你使用的是React Native 0.60+，框架已经支持自动link，手动执行npx react-native link可能导致重复链接。可以尝试重新安装包：

  npm uninstall react-native-push-notification
  rm -rf node_modules package-lock.json
  npx react-native start --reset-cache
  npm install react-native-push-notification
  

推荐的替代方案 #

如果觉得react-native-push-notification配置繁琐，推荐试试以下更易维护的包：

• @react-native-firebase/notifications：配合Firebase生态，支持本地和远程通知，文档完善，社区活跃度高。
• react-native-notifications：轻量专注的通知库，配置简洁，适配iOS和Android的原生通知特性。

内容的提问来源于stack exchange，提问作者Dipak