React Native中如何重置导航器的初始屏幕？解决跨导航器跳转后再次进入仍显示历史页面的问题

这个问题本质是React Navigation会保留每个嵌套导航器的导航栈状态：当你从外部导航器跳转到EXPLORE导航器内的BRIEF页面后，EXPLORE的栈会停留在BRIEF页面。后续返回原导航器后，再次触发跳转到EXPLORE的操作时，导航器会默认恢复之前的栈状态，而非回到初始页面。下面给你几个实用的解决思路：

方案一：点击返回时重置目标导航器的栈 #

你可以在BRIEF页面中监听返回事件，当用户点击返回按钮时，主动将EXPLORE导航器的栈重置到它的初始屏幕。这样下次进入EXPLORE时，就会默认显示首页。

在BRIEF页面中使用useFocusEffect结合导航事件监听实现：

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

function BriefScreen({ navigation }) {
  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = navigation.addListener('beforeRemove', () => {
        // 假设EXPLORE的初始屏幕是EXPLORE_HOME，重置栈到该页面
        navigation.dispatch(
          CommonActions.reset({
            index: 0,
            routes: [{ name: Screens.EXPLORE_HOME }],
          })
        );
      });

      return unsubscribe;
    }, [navigation])
  );

  // 页面其他业务逻辑...
}

beforeRemove事件会在页面被移除（比如触发返回）时触发，通过CommonActions.reset可以直接清空目标导航器的历史栈，只保留初始页面。

方案二：跳转到目标导航器首页时强制重置栈 #

如果你是通过底部导航栏或图标按钮跳转到EXPLORE首页，可直接在跳转时使用reset操作替代navigate，确保每次点击都回到初始页面：

// 图标按钮的跳转逻辑
const goToExploreHome = () => {
  navigation.dispatch(
    CommonActions.reset({
      index: 0,
      routes: [{ name: Screens.EXPLORE }],
    })
  );
};

如果是跨导航器跳转至EXPLORE首页，还可以利用initial参数强制重置目标导航器的栈：

navigation.navigate(Screens.EXPLORE, {
  screen: Screens.EXPLORE_HOME,
  initial: true, // 该参数会让目标导航器重置到指定的初始屏幕
});

方案三：用replace替代navigate（适合特定场景） #

如果你的业务不需要将BRIEF页面保留在EXPLORE的导航栈中，可将原跳转逻辑的navigate替换为replace：

// 原跳转代码修改为replace
navigation.replace(Screens.EXPLORE, {
  screen: Screens.BRIEF,
  params: { briefId: briefInfo.campaign_id },
});

这样用户从BRIEF页面返回时，EXPLORE导航器的栈会自动回到初始状态，下次进入EXPLORE就会显示首页。

你可以根据自身业务场景选择最合适的方案，方案一和方案二是最通用的解决方式。

内容的提问来源于stack exchange，提问作者Talmacel Marian Silviu