React Native如何将外部onNotification回调数据传入App组件

方案1：使用React Native内置事件发射器（轻量首选） #

React Native 自带的DeviceEventEmitter是跨组件/跨上下文传递事件的标准实现，无需额外依赖，也不需要使用全局变量。

实现步骤 #

1. 入口文件index.js的onNotification回调中触发自定义事件，携带推送数据：

import { DeviceEventEmitter } from 'react-native';
import PushNotification from 'react-native-push-notification';

// 原有推送配置保持不变
PushNotification.configure({
  // 其他配置项省略
  onNotification: (notification) => {
    // 触发自定义事件，传递推送data
    DeviceEventEmitter.emit('PUSH_NOTIFICATION_RECEIVED', notification.data);
    // 原有逻辑保留，比如通知完成处理
    notification.finish(PushNotification.FetchResult.NoData);
  },
});

2. App组件内部监听该事件，接收数据处理业务逻辑：

import { useEffect, useState } from 'react';
import { DeviceEventEmitter } from 'react-native';

function App() {
  const [notificationData, setNotificationData] = useState(null);

  useEffect(() => {
    // 注册推送事件监听
    const notificationListener = DeviceEventEmitter.addListener(
      'PUSH_NOTIFICATION_RECEIVED',
      (data) => {
        setNotificationData(data);
        // 此处可添加业务逻辑：跳转指定页面、弹窗提示、更新状态等
      }
    );

    // 组件卸载时移除监听，避免内存泄漏
    return () => notificationListener.remove();
  }, []);

  // 其他App组件逻辑
}

方案2：使用全局状态管理库（中大型项目首选） #

如果项目已经接入了Zustand、Redux、MobX等状态管理工具，可以直接把推送数据存入全局状态，任意组件都可以直接消费，耦合度更低，维护性更强。
以轻量状态库Zustand为例：

1. 新建全局通知状态存储：

// stores/useNotificationStore.js
import { create } from 'zustand';

const useNotificationStore = create((set) => ({
  latestNotificationData: null,
  updateNotificationData: (data) => set({ latestNotificationData: data }),
}));

export default useNotificationStore;

2. 入口文件index.js的回调中更新全局状态：

import useNotificationStore from './stores/useNotificationStore';
// 其他配置省略
onNotification: (notification) => {
  useNotificationStore.getState().updateNotificationData(notification.data);
}

3. App组件内直接消费状态：

import useNotificationStore from './stores/useNotificationStore';

function App() {
  const latestNotificationData = useNotificationStore(state => state.latestNotificationData);

  // 可直接使用latestNotificationData处理业务逻辑，状态变更会自动触发组件重渲染
}

补充冷启动场景处理 #

如果需要处理App完全杀死后，用户点击推送唤起App的场景，需要在App组件挂载时调用PushNotification.getInitialNotification()获取初始推送数据：

useEffect(() => {
  PushNotification.getInitialNotification().then(notification => {
    if (notification) {
      // 处理冷启动时的推送数据
      console.log('冷启动推送数据', notification.data);
    }
  });
}, []);

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