React Native新手求助：安卓/iOS收到通知时强制打开应用并展示信息页

嘿，这个需求完全可行！作为React Native开发者，我经常处理这类推送唤醒的场景，下面一步步给你拆解安卓和iOS端的实现方法，结合Firebase Cloud Messaging（FCM）来落地，毕竟你提到了Firebase通知：

这个需求的核心是让推送触发应用唤醒，并导航到指定信息页面。通过FCM配合React Native的原生层配置，完全可以实现——不管应用是在后台运行，还是被彻底杀死的状态。

首先确保你已经在项目中集成了@react-native-firebase/app和@react-native-firebase/messaging，如果还没做，先执行安装命令：

npm install @react-native-firebase/app @react-native-firebase/messaging
# 或者用yarn
yarn add @react-native-firebase/app @react-native-firebase/messaging

Android端实现 #

1. 配置后台消息服务 #

当应用在后台或被杀死时，推送的处理需要依赖安卓原生的后台服务。在android/app/src/main/AndroidManifest.xml中添加FCM服务配置：

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

然后在android/app/src/main/java/[你的包名]/下创建MyFirebaseMessagingService.java类，继承FirebaseMessagingService，重写onMessageReceived方法来强制唤醒应用：

package com.yourappname; // 替换成你的包名

import android.content.Intent;
import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;

public class MyFirebaseMessagingService extends FirebaseMessagingService {
    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        super.onMessageReceived(remoteMessage);
        
        // 构建启动主Activity的Intent，确保应用被唤醒到前台
        Intent intent = new Intent(this, MainActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
        // 把推送的额外数据传递给RN层，用来打开信息页面
        intent.putExtra("notificationData", remoteMessage.getData());
        startActivity(intent);
        
        // 可选：如果需要显示通知栏提示，这里可以添加自定义通知逻辑
        // sendNotification(remoteMessage);
    }
}

2. React Native层处理导航 #

在RN的主页面或根组件中，监听推送数据并导航到信息页面：

import { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import messaging from '@react-native-firebase/messaging';

const MainScreen = () => {
  const navigation = useNavigation();

  useEffect(() => {
    // 处理应用被杀死后，点击推送唤醒的情况
    messaging().getInitialNotification().then(remoteMessage => {
      if (remoteMessage) {
        navigation.navigate('InfoScreen', { data: remoteMessage.data });
      }
    });

    // 处理应用在后台时，点击推送唤醒的情况
    const unsubscribe = messaging().onNotificationOpenedApp(remoteMessage => {
      navigation.navigate('InfoScreen', { data: remoteMessage.data });
    });

    return unsubscribe;
  }, [navigation]);

  return <>{/* 你的主页面内容 */}</>;
};

export default MainScreen;

iOS端实现 #

1. 配置推送权限与FCM #

在Xcode中确保已经配置好APNs证书，并在AppDelegate.swift中初始化Firebase并请求推送权限：

import UIKit
import Firebase
import UserNotifications

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FirebaseApp.configure()
        
        // 请求推送权限
        UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { granted, error in
            guard granted else { return }
            DispatchQueue.main.async {
                application.registerForRemoteNotifications()
            }
        }
        
        // 设置通知中心代理
        UNUserNotificationCenter.current().delegate = self
        
        return true
    }
}

// 扩展处理通知回调
extension AppDelegate: UNUserNotificationCenterDelegate {
    // 应用在前台时收到通知
    func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        completionHandler([.alert, .sound, .badge])
    }
    
    // 用户点击通知（应用在后台或被杀死时）
    func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
        let userInfo = response.notification.request.content.userInfo
        
        // 唤醒应用并跳转到信息页面
        NotificationCenter.default.post(name: NSNotification.Name("NotificationReceived"), object: userInfo)
        
        completionHandler()
    }
}

// 处理后台推送唤醒
extension AppDelegate {
    func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable: Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
        NotificationCenter.default.post(name: NSNotification.Name("NotificationReceived"), object: userInfo)
        completionHandler(.newData)
    }
}

2. React Native层监听并导航 #

在RN的根组件中监听原生通知，然后导航到信息页面：

import { useEffect, NativeEventEmitter } from 'react';
import { useNavigation } from '@react-navigation/native';
import messaging from '@react-native-firebase/messaging';

const App = () => {
  const navigation = useNavigation();
  const eventEmitter = new NativeEventEmitter();

  useEffect(() => {
    // 处理应用被杀死后点击推送的情况
    messaging().getInitialNotification().then(remoteMessage => {
      if (remoteMessage) {
        navigation.navigate('InfoScreen', { data: remoteMessage.data });
      }
    });

    // 处理应用在后台时点击推送的情况
    const unsubscribeFCM = messaging().onNotificationOpenedApp(remoteMessage => {
      navigation.navigate('InfoScreen', { data: remoteMessage.data });
    });

    // 处理后台推送直接唤醒的情况（iOS特有）
    const unsubscribeNative = eventEmitter.addListener('NotificationReceived', (userInfo) => {
      navigation.navigate('InfoScreen', { data: userInfo });
    });

    return () => {
      unsubscribeFCM();
      unsubscribeNative();
    };
  }, [navigation, eventEmitter]);

  return <>{/* 你的应用根内容 */}</>;
};

export default App;

• 推送消息类型：一定要发送数据消息（只包含data字段，无notification字段），因为通知消息会由系统处理，无法强制唤醒应用；而数据消息会直接传递到你的应用代码中。
• iOS后台模式：在Xcode的项目配置中，开启Signing & Capabilities里的Background Modes，勾选Remote notifications，确保应用在后台能接收推送。
• 安卓权限：在AndroidManifest.xml中添加唤醒锁权限，保证应用能被唤醒：

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

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