React Native返回Map视图时重置OpenStreetMap缩放级别问题求助

场景说明 #

使用React Native开发iOS/Android跨端App，集成OpenStreetMap（通过react-native-leaflet-view）以集群形式展示气象站，地图默认缩放级别为12，默认中心位置由气象站集群位置决定。

问题复现流程 #

• 地图初始加载时缩放级别为12
• 点击集群查看更多站点，缩放级别变为18
• 点击站点跳转至Station详情页
• 点击底部导航栏地图图标返回Map视图时，地图位置恢复默认，但缩放级别仍保持18，需手动调回12才能查看所有站点

使用的版本与依赖 #

• react-native-leaflet-view
• npm: 11.4.2
• SDK: 53.0.20
• Expo: 0.24.15
• Expo Router: 5.1.4
• React Native: 0.79.5
• Node.js: v22.16

相关代码 #

export default function Map() {
  // The stations belong to a field. If the ID field is 0, it will show all station.
  // If the ID has a number, it will show only the stations of the selected field
  const params = useLocalSearchParams() as {id: string}
  const idFiled = (field?.idField == "0" || field?.idField == "-1") ? params.id : field?.idField
  // Do a useFetchQuery to get the detail of the station from the remote database according to the field ID
  const {data, isFetching} = useFetchQuery("/getstation/0/[id]", {id: parseInt(idFiled!)})

  // Need to define the OpenStreetMap map
  const [webViewContent, setWebViewContent] = useState<string | null>(null);
  //const [zom, setzom] = useState(12)

  // LOAD THE MAP
    useEffect(() => {
    console.log("Map useEffect")

    /* Loading the map */
    let isMounted = true;
    const loadHtml = async () => {
      try {
        const path = require("@/assets/leaflet.html");
        const asset = Asset.fromModule(path);
        await asset.downloadAsync();
        
        const htmlContent = await FileSystem.readAsStringAsync(asset.localUri!);

        if (isMounted) {
          setWebViewContent(htmlContent);
        }
      } catch (error) {
        Alert.alert('Error loading HTML', JSON.stringify(error));
        console.error('Error loading HTML:', error);
      }
    };

    loadHtml();

    return () => {
      isMounted = false;
    };

  },[])

  // When all data is not loaded from the database, load the componment <Loading>
  if(isFetching){
    return (
    <Loading />
    )
  }

  /* Define the center according to the cluster of station position */
  const lat = data?.map_center.lat as number
  const lng = data?.map_center.lng as number

  const INITIAL_REGION = {
    lat: lat, //position.latitude,
    lng: lng, //position.longitude,
  }

  /* When we drag the map or when we click on a marker, the <LeafletView> return message
  * about the positiom, zoom and ID of the marker
  * Exemple:
  * {"event": "onMoveEnd", "payload": {"bounds": {"_northEast": [Object], "_southWest": [Object]}, "mapCenterPosition": {"lat": 46.16794333707652, "lng": 6.002655029296876}, "zoom": 11}}
  */ 

  const onMessage = (event:any) => {
    console.info("mapCenterPosition: " + JSON.stringify(event.payload?.mapCenterPosition, null,1))

    /* **Redirection to the station view** after a clik on the marker */
    const id = event.payload?.mapMarkerID as number;
    if(event.event === "onMapMarkerClicked"){
      router.replace({pathname: '/station/[id]', params: {id: id}})
    } 
  }

  // In order to not overload the reading, I am not showing the marker array because it is not the cause of my problem and it work like charm :)
  const markers=Array()

  return (

    <RootView>
      <View style={{flex:1}}>

          <LeafletView
            source={{ html: webViewContent! }}
            mapCenterPosition={{
              lat:INITIAL_REGION.lat,
              lng: INITIAL_REGION.lng
            }}
        
            doDebug={false}
            mapMarkers={markers}
            zoom={12}
            zoomControl={true}
            onMessageReceived={onMessage}
          />
      </View>
    </RootView>
  )
}

已尝试的解决方案 #

• 定义const [zoom, setZoom] = useState(12)，绑定LeafletView的zoom属性，添加无依赖useEffect设置zoom为12，返回视图时仍保持18级缩放
• 点击站点跳转时调用setZoom(11)，虽生效但交互体验差，属于临时方案

可行解决方案 #

方案1：利用Expo Router焦点监听重置缩放 #

Expo Router的useFocusEffect钩子会在组件获得焦点时触发，适合返回Map视图时重置缩放状态：

import { useFocusEffect } from 'expo-router';
import { useCallback } from 'react';

export default function Map() {
  const [zoom, setZoom] = useState(12);
  // 保留原有代码...

  // 组件获得焦点时重置缩放级别
  useFocusEffect(
    useCallback(() => {
      setZoom(12);
    }, [])
  );

  // 保留原有代码...

  return (
    <RootView>
      <View style={{flex:1}}>
          <LeafletView
            source={{ html: webViewContent! }}
            mapCenterPosition={{
              lat:INITIAL_REGION.lat,
              lng: INITIAL_REGION.lng
            }}
            doDebug={false}
            mapMarkers={markers}
            zoom={zoom} // 绑定状态变量
            zoomControl={true}
            onMessageReceived={onMessage}
          />
      </View>
    </RootView>
  )
}

方案2：通过WebView消息调用Leaflet原生API #

如果react-native-leaflet-view支持向WebView发送消息，可以直接调用Leaflet的setZoom方法：

1. 给LeafletView添加引用：

const leafletRef = useRef(null);

2. 在焦点监听中发送缩放指令：

useFocusEffect(
  useCallback(() => {
    if (leafletRef.current) {
      leafletRef.current.sendMessage({
        type: 'setZoom',
        payload: 12
      });
    }
  }, [])
);

3. 在leaflet.html中添加消息监听：

<script>
  // 原有Leaflet初始化代码...
  
  window.addEventListener('message', (event) => {
    const data = event.data;
    if (data.type === 'setZoom') {
      map.setZoom(data.payload);
    }
  });
</script>

方案3：重载WebView内容强制重置地图 #

如果上述方案无效，可在组件获得焦点时重新加载WebView内容，强制地图回到初始状态：

useFocusEffect(
  useCallback(() => {
    const reloadHtml = async () => {
      const path = require("@/assets/leaflet.html");
      const asset = Asset.fromModule(path);
      await asset.downloadAsync();
      const htmlContent = await FileSystem.readAsStringAsync(asset.localUri!);
      setWebViewContent(htmlContent);
    };
    reloadHtml();
  }, [])
);

方案优先级 #

优先选择方案1，基于Expo Router原生能力实现，逻辑简单且符合React状态管理规范；若方案1无效，再尝试方案2（需WebView端配合）；方案3为兜底方案，强制重载会有轻微延迟，仅在必要时使用。

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