React Navigation中切换底部标签时如何重置对应Stack Navigator到初始路由

解决方案 #

方案一：使用unmountOnBlur配置（最简实现） #

开启底部标签页的unmountOnBlur属性后，离开标签页时对应嵌套导航器会自动销毁，再次进入时重新初始化，默认回到初始路由。
修改MainNav中HashSection的配置即可：

<MainNavigator.Screen 
  name="HashSection" 
  component={HashStack} 
  options={{
    ...hashesOptions,
    unmountOnBlur: true
  }} 
/>

该方案改造成本极低，仅需新增一行配置，适合栈页面逻辑简单、初始化开销低的场景。

方案二：监听聚焦事件手动重置栈（性能更优） #

如果不想每次切回标签都重新渲染整个栈组件，可以在HashStack内监听导航聚焦事件，触发时主动回到栈顶的Index路由。
修改后的HashStack代码如下：

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

const HashNavigator = createStackNavigator<HashRoutes>();

const screenOptions = ({ navigation, route }: HashStackProps): StackNavigationOptions => {
    const pressHandler = () => navigation.navigate("Modify", { title: "modify hashes" });
    return {
        ...sectionScreenOptions,
        headerRight: function HeaderLeft() {
            return (
                route.name === "Index" ?
                    <Button
                        marginR-10
                        iconSource={() => (
                            <MaterialCommunityIcons name="plus" color={Colors.primaryDarker} size={28} />
                        )}
                        style={{ width: 35, height: 35 }}
                        color={Colors.primaryDarker}
                        outline
                        outlineColor={Colors.primaryDarker}
                        onPress={pressHandler}
                    /> : <></>
            );
        },
        headerTitle: route.params.title
    }
}

export function HashStack() {
  const navigation = useNavigation();
   
  useEffect(() => {
    // 监听当前导航器聚焦事件
    const unsubscribe = navigation.addListener('focus', () => {
      // 重置到栈顶，即Index路由
      navigation.popToTop();
    });
    // 组件卸载时移除监听
    return unsubscribe;
  }, [navigation]);
   
  return (
    <HashNavigator.Navigator initialRouteName="Index" screenOptions={screenOptions} >
      <HashNavigator.Screen name="Index" component={Hash} initialParams={{ title: "hashes overview" }} />
      <HashNavigator.Screen name="Modify" component={ModifyHash} />
    </HashNavigator.Navigator>
  );
}

该方案仅重置路由栈，不会销毁整个HashStack组件，避免了不必要的重渲染开销，适合栈页面逻辑复杂的场景。

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