如何在React Navigation 5中保持屏幕挂载状态并实现前后导航？

我完全懂你的困扰——用Stack Navigator切回其他页面时，通话页面直接被卸载，状态全丢，虽然后台通话还在跑，但切回去得重新加载UI状态，体验确实糟。既然你不想用Modal，也没法用Switch Navigator，在React Navigation 5里有个直接有效的办法解决这个问题：

核心方案：禁用Stack Navigator的非活跃屏幕卸载 #

React Navigation 5的Stack Navigator默认会卸载不在栈顶的屏幕来优化性能，但你可以通过detachInactiveScreens: false这个配置全局禁用该行为，这样所有屏幕在离开后都会保持挂载状态，你的视频通话页面自然也能保留完整状态。

代码示例 #

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

// 导入你的页面组件
import HomeScreen from './screens/HomeScreen';
import VideoCallScreen from './screens/VideoCallScreen';
import OtherScreen from './screens/OtherScreen';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        // 关键配置：禁止卸载非活跃屏幕
        detachInactiveScreens={false}
        screenOptions={{
          headerShown: true, // 根据你的需求调整显示逻辑
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="VideoCall" component={VideoCallScreen} />
        <Stack.Screen name="Other" component={OtherScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppNavigator;

优化建议：聚焦状态判断 #

虽然禁用卸载能保留页面状态，但非活跃页面的UI渲染（比如视频流画面）会消耗不必要的资源。你可以用useIsFocused钩子判断页面是否处于焦点状态，从而智能暂停/恢复UI操作：

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

function VideoCallScreen() {
  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused) {
      // 页面聚焦时：恢复视频渲染、UI交互等
      resumeVideoStream();
    } else {
      // 页面失焦时：暂停视频渲染，只保留后台通话逻辑
      pauseVideoStream();
    }
  }, [isFocused]);

  // ...你的通话核心逻辑和UI代码
}

备选方案：全局状态分离（如果不想全局禁用卸载） #

如果你担心全局禁用卸载会影响其他页面的性能，可以把视频通话的核心状态（比如连接状态、通话参数）抽离到Context API或者Redux中。这样即使页面被卸载，重新返回时也能从全局状态快速恢复UI，不过这种方式需要你手动同步状态与UI，不如第一种方案直接省心。

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