Expo跨端应用中React Navigation切换导航器如何保留状态？

问题根源 #

你当前的实现是直接通过条件替换导航器组件，这会导致旧导航器被完全卸载，其内部的导航状态（如当前活跃标签页）也会被销毁。新导航器初始化时会使用固定的initialRouteName回到Home页，因此出现状态丢失的问题。

方案一：保留导航器实例，条件隐藏（最简单有效） #

核心思路 #

不卸载任何一个导航器，仅通过样式控制显示/隐藏，让两个导航器始终保持挂载状态。这样它们的内部导航状态会被完整保留，切换屏幕尺寸时直接显示对应导航器即可，无需额外同步逻辑。

实现步骤 #

1. 创建响应式导航容器组件

import { StyleSheet } from 'react-native';
import SidebarMenuNavigator from './SidebarMenuNavigator';
import BottomTabNavigator from './BottomTabNavigator';

export default function ResponsiveNavigator({ screenSize }) {
  return (
    <>
      {/* 抽屉导航：大屏显示，小屏隐藏 */}
      <SidebarMenuNavigator 
        style={[
          styles.fullScreen, 
          { display: screenSize.large ? 'flex' : 'none' }
        ]} 
      />
      {/* 底部标签导航：小屏显示，大屏隐藏 */}
      <BottomTabNavigator 
        style={[
          styles.fullScreen, 
          { display: screenSize.large ? 'none' : 'flex' }
        ]} 
      />
    </>
  );
}

const styles = StyleSheet.create({
  fullScreen: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

2. 修改MainStack配置
   将原有的条件替换导航器的代码，替换为上述容器组件：

<MainStack.Screen name="main" component={ResponsiveNavigator} />

3. 传递屏幕尺寸参数
   确保screenSize能通过props、Context等方式传递给ResponsiveNavigator组件（根据你当前的实现方式调整即可）。

方案优势 #

• 代码改动极小，无需处理复杂的路由同步逻辑
• 导航状态完全保留，切换屏幕尺寸时无任何跳转
• 性能开销极低，隐藏的导航器仅保留状态，不会渲染UI

方案二：同步两个导航器的路由状态（适合需卸载隐藏导航器的场景） #

如果因为性能或其他原因需要卸载不使用的导航器，可以通过跟踪当前活跃路由，在切换导航器时同步状态。

实现步骤 #

1. 维护当前活跃路由
   在父组件中监听路由变化，保存当前活跃的路由名称：

import { useState, useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import SidebarMenuNavigator from './SidebarMenuNavigator';
import BottomTabNavigator from './BottomTabNavigator';

export default function ResponsiveNavigator({ screenSize }) {
  const [currentRoute, setCurrentRoute] = useState('homeStack');
  const navigation = useNavigation();

  // 监听导航状态变化，更新当前路由
  useEffect(() => {
    const unsubscribe = navigation.addListener('state', (e) => {
      const activeRoute = e.data.state.routes[e.data.state.index].name;
      setCurrentRoute(activeRoute);
    });
    return unsubscribe;
  }, [navigation]);

  // 根据屏幕尺寸选择导航器，并传递当前路由作为初始路由
  const ActiveNavigator = screenSize.large ? SidebarMenuNavigator : BottomTabNavigator;

  return <ActiveNavigator initialRouteName={currentRoute} />;
}

2. 修改导航器组件
   让两个导航器支持接收initialRouteName属性：

// SidebarMenuNavigator
export default function SidebarMenuNavigator({ initialRouteName = 'homeStack' }) {
  return (
    <SidebarMenu.Navigator
      initialRouteName={initialRouteName}
      screenOptions={{ drawerType: "permanent" }}>
      <SidebarMenu.Screen
        name="homeStack"
        component={HomeStackNavigator}
        options={{ title: "Home" }}
      />
      <SidebarMenu.Screen
        name="profileStack"
        component={ProfileStackNavigator}
        options={{ title: "Profile" }}
      />
    </SidebarMenu.Navigator>
  );
}

// BottomTabNavigator
export default function BottomTabNavigator({ initialRouteName = 'homeStack' }) {
  return (
    <BottomTab.Navigator
      initialRouteName={initialRouteName}>
      <BottomTab.Screen
        name="homeStack"
        component={HomeStackNavigator}
        options={{ title: "Home" }}
      />
      <BottomTab.Screen
        name="profileStack"
        component={ProfileStackNavigator}
        options={{ title: "Profile" }}
      />
    </BottomTab.Navigator>
  );
}

方案优势 #

可以卸载不使用的导航器，节省内存，但需要额外处理路由监听和同步逻辑，代码复杂度稍高。

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