React Native通过FCM发送远程通知经验与库选型咨询

我在React Native里折腾FCM推送已经有好几个项目经验了，刚好你提到的这些库我大多都试过——也踩过和你一样“教程照做却完全没反应”的坑，下面分享些实打实的实操细节：

1. @react-native-firebase/messaging（目前最推荐的官方方案） #

这是现在React Native生态里最靠谱的FCM集成方式，因为是Firebase官方维护的包，适配性和更新都有保障。

实操步骤： #

• 先装依赖：

  npm install @react-native-firebase/app @react-native-firebase/messaging
  # iOS 还要执行 pod install
  

• 配置环节：
  • Android：把Firebase控制台下载的google-services.json放到android/app目录下，然后确保android/build.gradle和android/app/build.gradle里加了google-services插件的配置（教程里一般都会提，但要注意版本匹配）。另外Android 13+必须申请POST_NOTIFICATIONS权限，不然通知弹不出来。
  • iOS：在Xcode的Signing & Capabilities里开启Push Notifications和Background Modes下的Remote notifications，然后把Firebase的GoogleService-Info.plist拖进项目。
• 核心代码：
  • 先请求通知权限：

    import messaging from '@react-native-firebase/messaging';
    
    async function requestUserPermission() {
      const authStatus = await messaging().requestPermission();
      const enabled =
        authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
        authStatus === messaging.AuthorizationStatus.PROVISIONAL;
      if (enabled) {
        console.log('通知权限已获取');
      }
    }
    

  • 获取FCM令牌（用来给指定设备发推送）：

    const token = await messaging().getToken();
    

  • 监听通知：
    • 前台收到通知：用messaging().onMessage()监听，自己处理展示逻辑；
    • 后台/杀死状态收到通知：需要配置headless任务（Android）和Notification Service Extension（iOS），这部分是很多教程没讲清楚的点，一定要跟着官方文档一步步来。

踩过的坑： #

• iOS的APNs证书必须和Firebase控制台里配置的一致，开发环境用Development证书，生产环境用Production证书，混着用绝对收不到消息；
• Android的包名必须和Firebase控制台里的完全一致，大小写都不能错。

2. react-native-push-notification（本地+远程推送二合一） #

这个库本身不直接对接FCM，而是负责本地通知的展示和点击处理，所以需要配合FCM的消息接收库（比如上面的@react-native-firebase/messaging）一起用。

实操步骤： #

• 安装：

  npm install react-native-push-notification
  

• Android配置：必须创建NotificationChannel（Android 8+强制要求），不然通知根本不会显示：

  import PushNotification from 'react-native-push-notification';
  
  PushNotification.createChannel(
    {
      channelId: "your-channel-id", // 唯一ID
      channelName: "Your Channel Name", // 显示名称
      channelDescription: "A channel to categorise your notifications", // 描述
      importance: 4, // 重要程度，4是默认
      vibrate: true,
    },
    (created) => console.log(`Channel created: ${created}`)
  );
  

• 配合FCM：当用messaging收到FCM消息后，调用PushNotification.localNotification()来展示通知：

  messaging().onMessage(async remoteMessage => {
    PushNotification.localNotification({
      channelId: "your-channel-id",
      title: remoteMessage.notification.title,
      message: remoteMessage.notification.body,
    });
  });
  

踩过的坑： #

• iOS如果只配置这个库，没法接收远程推送，必须配合FCM的消息接收逻辑，或者直接用它的FCM集成（但不如官方的靠谱）。

3. react-native-fcm（已废弃，别再用了） #

这个库已经停止维护好几年了，对新的React Native版本和Android/iOS系统版本适配很差，我之前试过在RN0.68+的项目里用，直接崩溃，所以建议你直接跳过这个库，别浪费时间。

4. react-native-onesignal（第三方托管推送，省心之选） #

如果你不想自己折腾FCM和APNs的配置，OneSignal是个不错的选择——它封装了FCM、APNs甚至国内的推送渠道，只需要在OneSignal控制台配置好证书，剩下的逻辑都交给它。

实操步骤： #

• 安装：

  npm install react-native-onesignal
  

• 初始化：

  import OneSignal from 'react-native-onesignal';
  
  OneSignal.setAppId("YOUR_ONESIGNAL_APP_ID");
  

• 监听通知：

  // 通知被点击时的回调
  OneSignal.setNotificationOpenedHandler(notification => {
    console.log('通知被点击:', notification);
  });
  
  // 前台收到通知的回调
  OneSignal.setNotificationWillShowInForegroundHandler(notificationReceivedEvent => {
    const notification = notificationReceivedEvent.getNotification();
    console.log('前台收到通知:', notification);
    notificationReceivedEvent.complete(notification);
  });
  

踩过的坑： #

• 必须在OneSignal控制台里正确配置FCM的服务器密钥和iOS的APNs证书，不然消息发不出去；
• iOS同样要开启Push Notifications和Background Modes的Remote notifications权限。

通用排坑指南（不管用哪个库都要检查） #

1. 包名/Bundle ID一致性：Firebase控制台、苹果开发者后台、项目配置里的包名必须完全一致，大小写都不能错；
2. 证书/配置文件：iOS的APNs证书要对应环境（开发/生产），Android的google-services.json不能搞错；
3. 权限检查：Android 13+要主动请求POST_NOTIFICATIONS权限，iOS要确保用户允许了通知权限；
4. 后台配置：iOS必须开启Background Modes的Remote notifications，Android要确保FCM相关的Service正确注册；
5. 测试工具：用Firebase控制台的Cloud Messaging测试推送，或者用curl命令直接调用FCM API，这样能排除前端代码的问题；
6. 日志排查：Android看Logcat里的FirebaseMessaging相关日志，iOS看Xcode控制台，找有没有“接收消息失败”“权限被拒绝”之类的提示。

我自己现在新项目里基本都用@react-native-firebase/messaging，稳定性最好；如果是小项目或者不想折腾配置，OneSignal确实省事儿。如果还是没生效，先把上面的排坑点挨个检查一遍，大概率是某个配置环节漏了。

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