React Navigation v6中调用navigation.push()时如何防止页面卸载？

问题根源 #

你的导航结构将ProfileScreen嵌套在Tab标签页的子栈中，React Navigation默认lazy: true会延迟渲染非活跃Tab的组件，切换Tab时这些组件会被卸载；同时在子栈内push新页面时，非活跃Tab的页面也会因上述机制被卸载，导致返回时需要重新加载。

方案一：调整导航层级（推荐） #

将ProfileScreen的路由提升到根导航栈中，使其独立于Tab导航。这样Profile页面的跳转不会影响Tab导航内的页面状态，Tab导航始终处于栈底，内部页面保持挂载状态。

示例代码：

// 根导航组件
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import TabNavigator from './TabNavigator';
import ProfileScreen from './ProfileScreen';

const Stack = createStackNavigator();

export default function RootNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {/* Tab导航作为根栈的初始页面 */}
        <Stack.Screen name="Tabs" component={TabNavigator} />
        {/* ProfileScreen作为根栈的独立页面 */}
        <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Tab导航组件
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeStack from './HomeStack';
import OtherStack from './OtherStack';

const Tab = createBottomTabNavigator();

export default function TabNavigator() {
  return (
    <Tab.Navigator
      // 禁止切换Tab时卸载页面
      screenOptions={{ unmountOnBlur: false }}
    >
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Other" component={OtherStack} />
    </Tab.Navigator>
  );
}

// 子栈示例（HomeStack）
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

export default function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
    </Stack.Navigator>
  );
}

之后在任意页面跳转ProfileScreen时，直接调用：

navigation.push('ProfileScreen', { userId: '目标用户ID' });

此时Tab内的所有页面（如HomeScreen）都会保持挂载状态，返回时无需重新加载。

方案二：修改Tab导航的卸载配置 #

如果不想调整导航结构，可通过Tab导航的配置强制保持所有标签页组件的挂载：

<Tab.Navigator
  unmountOnBlur={false} // 切换Tab时不卸载当前标签页组件
  lazy={false} // 初始化时渲染所有标签页组件，避免首次切换加载
>
  {/* 你的Tab.Screen定义 */}
</Tab.Navigator>

该方案会增加应用启动时的资源消耗，若Tab页面较多或逻辑复杂，不推荐使用。

额外检查 #

确保页面组件中没有因useEffect依赖项不合理导致的重复加载；若使用状态管理工具（如Redux、Context），需保证状态在组件卸载后仍能持久化（不过上述方案已避免不必要的卸载）。

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