React Native中React Navigation嵌套导航父路由重置问题

问题根源 #

1. 返回无响应：大概率是导航上下文错误，Work页面中调用的navigation可能属于外层Drawer导航而非内层Stack导航，导致无法触发Work详情页的返回逻辑；另外自定义详情页的返回按钮可能未正确绑定Stack的goBack操作。
2. 切回Home再进Work直接到详情页：Drawer导航默认会保留每个Screen对应组件的状态，WorkMenu里的Stack路由状态不会自动重置，所以再次进入时停留在之前的详情页。

具体修复步骤 #

1. 确保使用正确的Stack导航上下文 #

给内层Stack导航器添加唯一ID，确保Work页面能获取到正确的导航实例：

// App.js 中修改WorkMenu组件
function WorkMenu(){
  return (
    <Stack.Navigator 
      id="WorkStack" // 添加ID，用于定位内层Stack导航
      initialRouteName="WorkOverview" 
      useLegacyImplementation
      screenOptions={{
        headerShown: true,
        // 移除drawer相关配置（这是Drawer导航的属性，Stack不需要）
      }} >
      <Stack.Screen name="WorkOverview" component={WorkDrawer} options={{ headerShown: false }} />
      <Stack.Screen name="WorkDetail" component={WorkDetailDrawer} options={{ 
        headerShown: true, // 开启默认Header，自带返回按钮绑定Stack的goBack
        title: "工作详情"
      }} />
    </Stack.Navigator>  
  );
}

修改Work.js中的导航触发逻辑，明确调用内层Stack的导航：

// Work.js
import { useNavigation } from '@react-navigation/native';

function WorkTile({data}) {
    const navigation = useNavigation();
    // 获取内层WorkStack导航实例
    const workStackNav = navigation.getParent('WorkStack');

    return ( 
        <Pressable mt={5} shadow="2" rounded="lg" w={{ base: 96, md: 72, lg: 48 }} 
            _light={{ bg: "coolGray.50" }} 
            _dark={{ bg: "gray.800" }} 
            overflow="hidden"            
            onPress={() => 
                workStackNav?.navigate("WorkDetail", { workDetail: data })
            }
        >
        ...    
        </Pressable>
    );
}

如果Work详情页用了自定义返回按钮，确保调用Stack的goBack：

// WorkDetailDrawer.js示例
function WorkDetailDrawer({ navigation }) {
  return (
    <View>
      <Pressable onPress={() => navigation.goBack()}>
        <Text>返回工作概览</Text>
      </Pressable>
      {/* 其他详情内容 */}
    </View>
  );
}

2. 切换Drawer项时重置Work的Stack路由 #

给Drawer导航添加unmountOnBlur: true，切换到其他Drawer项时自动卸载WorkMenu组件，再次进入时重新初始化Stack到概览页：

// App.js 中修改DrawerMenu组件
function DrawerMenu() {
  return (
    <Drawer.Navigator 
      useLegacyImplementation 
      screenOptions={{
        headerShown: true, 
        drawerPosition: 'right',
        overlayColor: 'rgba(0,0,0,.5)',              
        drawerActiveTintColor: text,
        drawerInactiveTintColor: text,
        drawerStyle: { backgroundColor: bg, },
        unmountOnBlur: true, // 切换Drawer项时卸载当前组件
      }}      
      drawerContent={(props) => <CustomDrawerContent {...props} />} >
        <Drawer.Screen name="Home"  component={HomeDrawer}  options={customDrawOptions} />
        <Drawer.Screen name="Work"  component={WorkMenu}    options={customDrawOptions} />
        <Drawer.Screen name="Posts" component={PostsDrawer} options={customDrawOptions} />
    </Drawer.Navigator>
  );
}

如果需要保留Work组件的部分状态（不想完全卸载），可以监听Drawer路由变化，手动重置Stack：

// App.js 中修改DrawerMenu组件
import { useRef } from 'react';
import { StackActions } from '@react-navigation/native';

function DrawerMenu() {
  const workStackRef = useRef();

  // 给WorkMenu的Stack导航器绑定ref
  function WorkMenu(){
    return (
      <Stack.Navigator 
        ref={workStackRef}
        initialRouteName="WorkOverview" 
        useLegacyImplementation
        screenOptions={{ headerShown: true }} >
        <Stack.Screen name="WorkOverview" component={WorkDrawer} options={{ headerShown: false }} />
        <Stack.Screen name="WorkDetail" component={WorkDetailDrawer} options={{ headerShown: true }} />
      </Stack.Navigator>  
    );
  }

  return (
    <Drawer.Navigator 
      useLegacyImplementation 
      screenOptions={{
        // 原有Drawer配置
        headerShown: true, 
        drawerPosition: 'right',
        overlayColor: 'rgba(0,0,0,.5)',              
        drawerActiveTintColor: text,
        drawerInactiveTintColor: text,
        drawerStyle: { backgroundColor: bg, },
      }}
      onStateChange={(state) => {
        // 获取当前激活的Drawer路由
        const currentRoute = state.routes[state.index].name;
        if (currentRoute === 'Work') {
          // 重置Work的Stack到概览页
          workStackRef.current?.dispatch(
            StackActions.reset({
              index: 0,
              routes: [{ name: 'WorkOverview' }],
            })
          );
        }
      }}
      drawerContent={(props) => <CustomDrawerContent {...props} />} >
        <Drawer.Screen name="Home"  component={HomeDrawer}  options={customDrawOptions} />
        <Drawer.Screen name="Work"  component={WorkMenu}    options={customDrawOptions} />
        <Drawer.Screen name="Posts" component={PostsDrawer} options={customDrawOptions} />
    </Drawer.Navigator>
  );
}

验证效果 #

修改后导航流程会符合预期：
Home -> Work概览 -> 工作详情(1) -> 返回Work概览 -> 工作详情(2) -> ...
从Home切换回Work时，会默认进入概览页而非之前的详情页。

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