React Navigation 6：从Stack页面C跳转至B时useEffect不触发问题

我在Stack导航器内嵌套Tab导航器时遇到以下问题：

• 从Tab页面（如SearchScreen）跳转至Stack页面SearchResultsScreen时，SearchResultsScreen的useEffect能正常触发，无异常；
• 从Stack页面NotificationsScreen跳转至SearchResultsScreen时，跳转和参数传递都正常，但SearchResultsScreen的useEffect不触发，尝试使用useIsFocused、useFocusEffect也无效。

经排查发现，NotificationsScreen是通过Tab导航器的头部按钮进入的，相关代码如下：

const MyTabs = (props) => {
    return (
        <Tab.Navigator
            screenOptions={{
                headerRight: (props) => (
                        <TouchableOpacity onPress={() => navigation.navigate("Notifications")}>
                            <Icon name="notifications"/>
                        </TouchableOpacity>
                )
            }}
        >    
            <Tab.Screen
                name="Home"
                component={HomeScreen}
            />
            <Tab.Screen 
          // 从SearchScreen跳转至SearchResultsScreen时，SearchResultsScreen的useEffect会触发
                name="Search"
                component={SearchScreen}
            />
        </Tab.Navigator>
    );
}

const MyStack = () => {
    return (
        <Stack.Navigator>
                <Stack.Screen name="Tabs">
                    {(props) => <MyTabs {...props}  />}
                </Stack.Screen>
            <Stack.Screen
                    name="SearchResults"
                    component={SearchResultsScreen}
                />
            <Stack.Screen
                    name="Notifications"
                    component={NotificationsScreen}
            // 从NotificationsScreen跳转至SearchResultsScreen时，SearchResultsScreen的useEffect不会触发
                />
    </Stack.Navigator>

这是因为NotificationsScreen和SearchResultsScreen同属于外层Stack导航器的栈结构中。如果之前已经打开过SearchResultsScreen，再次从NotificationsScreen用navigate跳转时，React Navigation会复用已存在的页面实例，而非重新创建。而依赖空数组的useEffect只会在组件挂载时执行一次，所以不会再次触发；从Tab页面跳转时，每次都是在Stack栈中push新的SearchResultsScreen实例，因此useEffect能正常触发。

方案1：用navigation.push替代navigation.navigate #

在NotificationsScreen中跳转时，使用push方法强制添加新的页面实例：

// NotificationsScreen内的跳转代码
navigation.push('SearchResults', { /* 你的参数 */ });

每次调用push都会创建新的SearchResultsScreen实例，useEffect会正常执行。

方案2：监听路由参数变化 #

如果希望复用页面实例，同时在参数更新时执行逻辑，可以在SearchResultsScreen中监听route.params的变化：

import { useRoute, useFocusEffect } from '@react-navigation/native';
import React from 'react';

const SearchResultsScreen = ({ navigation }) => {
  const route = useRoute();

  // 监听参数变化触发逻辑
  useEffect(() => {
    // 这里处理参数更新后的业务逻辑
    console.log('参数更新，执行对应逻辑');
  }, [route.params]);

  // 或者结合useFocusEffect，确保页面聚焦时也能触发
  useFocusEffect(
    React.useCallback(() => {
      console.log('页面聚焦，参数可能更新，执行逻辑');
      return () => {
        // 可选：页面失焦时的清理操作
      };
    }, [route.params])
  );

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

方案3：跳转时指定唯一key强制刷新 #

在跳转时给目标页面指定唯一的key，让React Navigation认为是新页面，从而重新创建实例：

// NotificationsScreen内的跳转代码
navigation.navigate('SearchResults', {
  ...yourParams, // 原有的参数
  key: `SearchResults-${Date.now()}` // 用时间戳生成唯一key
});

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