React Native中React Navigation双屏切换如何保留状态且避免重挂载？

要实现页面A和B来回切换时保留各自状态、不重新挂载，且导航栈始终维持[A,B]或[B,A]的结构，推荐两种方案：

方案一：使用Tab Navigation（最简便） #

Tab Navigation的核心特性就是每个标签页对应的页面会始终保持挂载状态，切换时不会卸载或重新渲染，完美匹配需求。

代码示例 #

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import ScreenA from './ScreenA';
import ScreenB from './ScreenB';

const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="A" component={ScreenA} />
      <Tab.Screen name="B" component={ScreenB} />
    </Tab.Navigator>
  );
}

• 切换时直接通过Tab栏点击，或在代码中调用navigation.navigate('A')/navigation.navigate('B')即可
• 两个页面的状态会完全保留，不会因为切换被重置

方案二：Stack Navigation配合keepMounted（适合必须用栈导航的场景） #

如果业务需求必须使用Stack Navigation，可以通过开启keepMounted选项让页面在栈中保持挂载，同时手动控制栈结构避免重复页面：

1. 配置Stack Navigator #

import { createStackNavigator } from '@react-navigation/stack';
import ScreenA from './ScreenA';
import ScreenB from './ScreenB';

const Stack = createStackNavigator();

function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="A" 
        component={ScreenA} 
        options={{ keepMounted: true }} // 保持A页面挂载，即使不在栈顶
      />
      <Stack.Screen 
        name="B" 
        component={ScreenB} 
        options={{ keepMounted: true }} // 保持B页面挂载，即使不在栈顶
      />
    </Stack.Navigator>
  );
}

2. 控制跳转逻辑 #

• 在页面A中跳转到B：直接调用navigation.navigate('B')，此时栈结构为[A,B]，B为当前页面，A保持挂载
• 在页面B中跳转到A：不要用goBack()（会弹出B导致卸载），而是通过判断栈结构来重置或跳转：

const handleGoToA = () => {
  const currentRoutes = navigation.getState().routes;
  // 检查栈中是否已有A页面
  const aRouteIndex = currentRoutes.findIndex(route => route.name === 'A');
  
  if (aRouteIndex !== -1) {
    // 重置栈到A，同时因为keepMounted，B的状态会保留
    navigation.reset({
      index: 0,
      routes: [{ name: 'A' }],
    });
  } else {
    navigation.navigate('A');
  }
};

• 切换回A时，B的状态仍会保留（因keepMounted），再次跳转到B时直接复用已挂载的实例

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