Expo应用中安装react-native-bootsplash及FCM初始通知获取问题

一、解决FCM初始通知返回null的问题 #

• 检查通知格式
  发送的FCM通知必须是通知消息（而非纯数据消息），Android端需包含click_action字段，iOS端需包含category字段，且字段值要与应用配置匹配。纯数据消息不会触发系统通知栏，无法被getInitialNotification()和onNotificationOpenedApp捕获。
• 调整代码执行时机
  Expo Splash Screen会延迟App初始化，过早调用FCM方法会导致通知未被捕获。建议将FCM相关代码放在SplashScreen.hideAsync()之后，或等待App进入活跃状态后执行：

  import { AppState } from 'react-native';
  import * as SplashScreen from 'expo-splash-screen';
  import messaging from '@react-native-firebase/messaging';
  
  async function initFCM() {
    await SplashScreen.hideAsync();
    // 获取初始通知
    const initialNotification = await messaging().getInitialNotification();
    if (initialNotification) {
      // 此处写你的处理逻辑
    }
    // 监听通知打开事件
    messaging().onNotificationOpenedApp(remoteMessage => {
      // 此处写你的处理逻辑
    });
  }
  
  // 也可通过监听AppState实现
  AppState.addEventListener('change', async (state) => {
    if (state === 'active') {
      const initialNotification = await messaging().getInitialNotification();
      if (initialNotification) {
        // 此处写你的处理逻辑
      }
    }
  });
  

• 验证Expo FCM配置
  确认app.json中已正确配置FCM的googleServicesFile（Android和iOS分别配置），且项目已调用messaging().registerDeviceForRemoteMessages()完成设备注册。

二、Expo应用中安装react-native-bootsplash的注意事项 #

react-native-bootsplash仅支持Bare workflow的Expo项目，Managed workflow无法直接安装（需修改原生代码）：

1. 若当前是Managed workflow，需先执行expo eject转为Bare workflow
2. 安装依赖：

   npm install react-native-bootsplash
   # 或 yarn add react-native-bootsplash
   

3. 运行自动配置脚本生成启动屏资源并配置原生项目：

   npx react-native-bootsplash generate --assets-path ./assets/bootsplash --flavor main
   

4. 按照官方指引修改原生启动逻辑，替换原有的expo-splash-screen配置。

替换为react-native-bootsplash后，需确保FCM初始化代码在启动屏隐藏后执行，这样才能正常捕获初始通知。

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