如何避免react-navigation切换页面时地图页面卸载丢失状态？

这个问题我之前帮不少开发者解决过——DrawerNavigator默认会在你切换到其他页面时卸载当前非活跃的屏幕，所以地图页面的组件状态（标记点、配置）全丢了，回来就得重新加载。别担心，有几个可行的方案，按优先级给你说：

方案一：设置屏幕不随失焦卸载（推荐） #

在React Navigation 6.x及以上版本，你可以给地图页面添加unmountOnBlur: false的配置，让屏幕在切换到其他页面时保持挂载状态，这样所有状态都会保留。

代码示例 #

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen 
        name="Home" 
        component={HomeScreen} 
      />
      <Drawer.Screen 
        name="Map" 
        component={MapScreen} 
        // 关键配置：失焦时不卸载页面
        options={{ unmountOnBlur: false }} 
      />
      <Drawer.Screen 
        name="Settings" 
        component={SettingsScreen} 
      />
    </Drawer.Navigator>
  );
}

这个配置会让MapScreen始终保持挂载，切换回来时直接显示之前的地图状态，完全不需要重新加载标记点和配置。

方案二：全局状态管理兜底 #

如果因为某些原因不能用方案一（比如担心长期挂载影响性能），可以把地图的核心状态（标记点坐标、地图中心位置、缩放级别等）保存到全局状态中，比如用Context API或者Redux。这样即使页面被卸载，状态也能保留，回来时从全局状态读取并恢复地图配置。

简单Context示例思路 #

1. 创建一个保存地图状态的Context：

import { createContext, useContext, useState } from 'react';

const MapStateContext = createContext();

export function MapStateProvider({ children }) {
  const [mapMarkers, setMapMarkers] = useState([]);
  const [mapRegion, setMapRegion] = useState(null);

  return (
    <MapStateContext.Provider value={{ mapMarkers, setMapMarkers, mapRegion, setMapRegion }}>
      {children}
    </MapStateContext.Provider>
  );
}

export function useMapState() {
  return useContext(MapStateContext);
}

2. 在MapScreen中使用这个Context来保存和读取状态：

import { useMapState } from './MapStateContext';

function MapScreen() {
  const { mapMarkers, setMapMarkers, mapRegion, setMapRegion } = useMapState();

  // 初始化地图时读取全局状态，添加标记时更新全局状态
  return (
    <MapView
      region={mapRegion}
      onRegionChangeComplete={setMapRegion}
    >
      {mapMarkers.map(marker => (
        <Marker key={marker.id} coordinate={marker.coordinate} />
      ))}
    </MapView>
  );
}

这样即使页面被卸载，全局状态里的标记和配置依然存在，回来时就能直接恢复。

注意事项 #

• 如果你的React Navigation是5.x版本，配置逻辑类似，只是需要把unmountOnBlur放在screenOptions或者通过navigation.setOptions设置。
• 方案一虽然方便，但如果地图页面比较重，长期挂载可能会占用一些内存，你可以根据自己的应用场景权衡选择。

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