React Native：从通知跳转至活跃页面时useEffect不触发问题

问题分析 #

当聊天页面是应用关闭前最后打开的页面，点击通知跳转时，页面不会重新挂载，因此空依赖的useEffect不会执行；同时由于页面本来处于聚焦状态，从后台唤醒后isFocused状态没有发生变化，依赖isFocused的useEffect也不会触发。这是React Navigation的页面复用机制导致的，并非通知跳转的默认行为。

解决方案 #

1. 监听导航focus事件（推荐方案） #

通过React Navigation的focus事件监听页面聚焦状态，无论页面是首次挂载还是从后台唤醒/通知跳转回来，只要获得焦点就执行消息获取逻辑：

import { useNavigation } from '@react-navigation/native';
import { useEffect, Alert } from 'react';

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

  useEffect(() => {
    const fetchChatMessages = () => {
      Alert.alert('FETCHING');
      // 这里添加获取聊天消息的业务逻辑
    };

    // 组件挂载时先执行一次
    fetchChatMessages();
    // 监听页面聚焦事件
    const unsubscribe = navigation.addListener('focus', fetchChatMessages);

    // 组件卸载时移除监听，避免内存泄漏
    return unsubscribe;
  }, []);

  // 页面其他逻辑
  return (/* 页面内容 */);
};

2. 通过跳转参数强制触发刷新 #

在通知点击的跳转逻辑中添加唯一标识参数，页面监听该参数变化来触发刷新：

修改通知跳转代码：

import { navigationRef, navigate } from '@env/RootNavigation.js';

handleBackgroundNotificationClicked(data) {
  let notifData = JSON.parse(data.data.data);
  this.initChat(notifData.chat, false);
  navigate('ChatList', { 
    chatId: notifData.chat.id,
    refreshTrigger: Date.now() // 添加时间戳作为唯一触发标识
  });
}

聊天页面代码：

import { useEffect, Alert } from 'react';
import { useRoute } from '@react-navigation/native';

const ChatList = () => {
  const route = useRoute();
  const { chatId, refreshTrigger } = route.params;

  useEffect(() => {
    Alert.alert('FETCHING');
    // 获取聊天消息逻辑
  }, [refreshTrigger]); // 依赖唯一标识，每次通知跳转都会更新

  return (/* 页面内容 */);
};

3. 重置导航栈（按需使用） #

如果允许清空之前的导航栈，可以使用reset方法强制重新创建页面实例，确保useEffect触发：

import { navigationRef } from '@env/RootNavigation.js';

handleBackgroundNotificationClicked(data) {
  let notifData = JSON.parse(data.data.data);
  this.initChat(notifData.chat, false);
  navigationRef.reset({
    index: 0,
    routes: [{ 
      name: 'ChatList', 
      params: { chatId: notifData.chat.id } 
    }],
  });
}

注意：此方法会清空导航栈，影响用户返回逻辑，需根据业务场景判断是否适用。

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