React Navigation TabNavigator嵌套StackNavigator切换无法回到初始屏如何解决

React Navigation 底部标签导航默认会保留每个标签对应嵌套栈的导航状态，离开标签时不会清空栈内跳转记录，因此切回标签时会停留在上次离开的页面，不会回到初始页。

方案1：添加unmountOnBlur属性（实现最简） #

直接在对应底部标签的屏幕配置中新增unmountOnBlur: true配置，离开标签时会自动卸载整个嵌套栈，切回时重新初始化，自动回到栈首页。
修改Tabroute.js代码：

<BottomTab.Navigator>
      <BottomTab.Screen
        name={navigationStrings.REQUEST}
        component={RequestStackComp}
        options={{ unmountOnBlur: true }} // 新增该行配置
      />
      <BottomTab.Screen
        name={navigationStrings.MORE}
        component={MoreStackComp}
      />
</BottomTab.Navigator>

适用场景：业务要求切回标签必须重置到首页，不需要保留之前的栈状态和页面输入内容，开发成本最低。

方案2：监听聚焦事件手动重置（灵活可控） #

如果不需要完全卸载栈组件，或者需要自定义重置触发条件，可以在嵌套栈组件中监听标签聚焦事件，触发时手动重置栈到初始页面。
修改Stack.js代码：

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

export default function RequestStack() {
  const navigation = useNavigation();
  const isFocused = useIsFocused();

  // 标签聚焦时重置栈到初始页
  useEffect(() => {
    if(isFocused) {
      navigation.reset({
        index: 0,
        routes: [{ name: navigationStrings.REQUEST }]
      })
    }
  }, [isFocused, navigation])

  return (
    <>
      <Stack.Screen
        name={navigationStrings.REQUEST}
        component={Request}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="startBooking"
        component={StartBooking}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="parking"
        component={Parking}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name={navigationStrings.RIDE_DETAILS}
        component={RideDetails}
        options={{ headerShown: false }}
      />
    </>
  );
}

适用场景：需要灵活控制重置逻辑，比如特定场景下不需要重置、或者要保留部分页面状态的场景，性能优于全量卸载组件。

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