React Native中使用@notifee/react-native实现点击通知跳转指定页面

完全可以实现点击通知跳转应用内指定页面，确实需要在pressAction中添加配置，同时结合你的导航库（如React Navigation）处理跳转逻辑，具体步骤如下：

1. 配置通知的pressAction与自定义数据 #

在displayNotification的配置中，通过pressAction.data字段传递跳转目标页面的标识（如页面名称）和所需参数：

const channelId = await notifee.createChannel({
  id: 'default',
  name: 'Default Channel',
});

await notifee.displayNotification({
  title: 'Notification Title',
  body: 'Main body content of the notification',
  android: {
    channelId,
    smallIcon: 'ic_launcher',
    pressAction: {
      id: 'default',
      // 添加自定义数据，用于指定跳转目标
      data: {
        screen: 'TargetDetailScreen',
        params: { itemId: 456 } // 可选：传递页面需要的参数
      }
    },
  },
});

2. 监听通知点击事件，处理页面跳转 #

在应用初始化位置（如App.js），通过notifee的事件监听方法捕获通知点击行为，再调用导航库的跳转方法：

示例（以React Navigation v6为例）

import notifee from '@notifee/react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';

// 处理前台状态下的通知点击
notifee.onForegroundEvent(({ type, detail }) => {
  if (type === notifee.EventType.PRESS) {
    const { screen, params } = detail.notification.android.pressAction.data;
    const navigation = useNavigation();
    navigation.navigate(screen, params);
  }
});

// 处理后台/杀死状态下的通知点击
notifee.onBackgroundEvent(async ({ type, detail }) => {
  if (type === notifee.EventType.PRESS) {
    const { screen, params } = detail.notification.android.pressAction.data;
    // 后台环境下通过重置导航栈实现跳转
    await NavigationContainer.resetRoot({
      index: 0,
      routes: [{ name: screen, params }],
    });
  }
});

注意事项 #

• 若使用其他导航库，需对应调整跳转逻辑（如自定义路由的跳转方法）。
• 后台事件处理中，确保导航容器已完成初始化，或通过深度链接方案触发跳转。
• pressAction.data的字段可自定义，只要能明确标识目标页面及参数即可。

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