React Navigation：切换Tab时强制Stack渲染初始路由的方法

这个问题是react-navigation的默认行为导致的——Tab导航器会默认保留每个Tab对应嵌套Stack的路由状态，所以你切回Search Tab时会停留在之前的SearchResult页面。不过我们可以通过自定义Tab的点击行为，强制重置Stack到初始的Search页面，具体实现方法如下：

方法：利用tabOnPress自定义Tab点击逻辑 #

你需要在TabNavigator的配置中，给Search Tab添加navigationOptions，通过tabOnPress事件触发Stack路由的重置操作。

步骤1：导入必要模块 #

首先确保你导入了NavigationActions：

import { NavigationActions } from 'react-navigation';

步骤2：修改TabNavigator配置 #

调整你的TabNavigation代码，给Search Tab添加自定义点击处理：

const HomeStack = StackNavigation({ 
  Info: {screen: Info}, 
  Main: {screen: Main} 
});

const SearchStack = StackNavigation({ 
  Search: {screen: Search}, 
  SearchResult: {screen: SearchResult} 
});

const AppTabNavigator = TabNavigation({
  Home: { screen: HomeStack },
  Search: {
    screen: SearchStack,
    navigationOptions: ({ navigation }) => ({
      tabOnPress: ({ defaultHandler }) => {
        // 重置Search Stack的路由，只保留Search页面
        navigation.dispatch(
          NavigationActions.reset({
            index: 0, // 指定当前活动路由的索引
            actions: [
              NavigationActions.navigate({ routeName: 'Search' })
            ]
          })
        );
        // 执行默认的Tab切换行为
        defaultHandler();
      }
    })
  }
});

原理说明 #

• tabOnPress允许我们覆盖Tab的默认点击逻辑，在切换Tab前先重置对应的Stack路由。
• NavigationActions.reset会清除目标Stack的现有路由栈，重新创建一个只包含Search页面的栈，这样切回Search Tab时就会始终显示Search页面。

这样修改后，无论你之前在Search Stack里导航到哪个页面，只要切到其他Tab再切回来，都会自动回到Search页面，完美解决你的需求！

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