React Native v0.76.1中Maps返回页面后不显示用户位置与标记

问题描述 #

使用React Native v0.76.1，首次进入地图页面时，用户位置和标记显示正常，但返回后再次进入，位置、标记都不显示，GPS位置指示器也不出现（设备位置已开启），更换API Key后问题依旧。

解决步骤 #

1. 手动管理地图实例与位置监听
   React Native Maps在组件卸载后可能未彻底释放资源，导致二次挂载时无法正常初始化。用useRef保存地图实例，挂载时重新请求位置权限并获取当前位置，卸载时清理位置监听：

import { View, StyleSheet } from 'react-native';
import React, { useRef, useEffect } from 'react';
import MapView, { Marker } from 'react-native-maps';
import { responsiveHeight } from 'react-native-responsive-dimensions';
import Geolocation from '@react-native-community/geolocation';

const NewStoreLocator = () => {
  const mapRef = useRef(null);
  const storeMarkers = [
    {
      latitude: 37.78925,
      longitude: -122.4324,
      title: 'Pink Paws Store 1',
      description: 'Your favorite store for pink paws in town.',
    },
    {
      latitude: 37.79025,
      longitude: -122.4334,
      title: 'Pink Paws Store 2',
      description: 'Another branch with amazing pink paws.',
    },
    {
      latitude: 37.78725,
      longitude: -122.4304,
      title: 'Pink Paws Store 3',
      description: "Don't miss out on our latest collection.",
    },
    {
      latitude: 37.78850,
      longitude: -122.4340,
      title: 'Pink Paws Store 4',
      description: 'Visit us for the best pink paws in the area!',
    },
    {
      latitude: 37.78625,
      longitude: -122.4315,
      title: 'Pink Paws Store 5',
      description: 'Exclusive offers at this location.',
    },
  ];

  useEffect(() => {
    // 请求位置权限并获取当前位置
    Geolocation.requestAuthorization();
    Geolocation.getCurrentPosition(
      (position) => {
        mapRef.current?.animateToRegion({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        });
      },
      (err) => console.log(err),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );

    // 组件卸载时清理位置监听
    return () => Geolocation.clearWatch();
  }, []);

  return (
    <MapView
      ref={mapRef}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
      showsUserLocation={true}
      style={styles.map}
    >
      {storeMarkers.map((marker, index) => (
        <Marker
          key={`${marker.latitude}-${marker.longitude}-${index}`}
          coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
          title={marker.title}
          description={marker.description}
        />
      ))}
    </MapView>
  );
};

const styles = StyleSheet.create({
  map: {
    height: responsiveHeight(50),
    width: '100%',
    marginBottom: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 10,
  },
});

export default NewStoreLocator;

2. 强制地图组件重新渲染
   给MapView添加动态key，每次页面挂载时生成新的key值，强制组件重新初始化：

import React, { useState, useEffect } from 'react';

const NewStoreLocator = () => {
  const [mapKey, setMapKey] = useState(Date.now());

  useEffect(() => {
    // 每次挂载时更新key，触发组件重新渲染
    setMapKey(Date.now());
  }, []);

  return (
    <MapView
      key={mapKey}
      // 其他属性保持不变
    />
  );
};

3. 主动检查并重新请求位置权限
   首次授权后，二次进入页面时权限状态可能未同步，主动检查权限并重新请求：

import { PermissionsAndroid, Platform } from 'react-native';

useEffect(() => {
  const checkLocationPermission = async () => {
    if (Platform.OS === 'android') {
      const hasPermission = await PermissionsAndroid.check(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      );
      if (!hasPermission) {
        await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
        );
      }
    }
  };
  checkLocationPermission();
}, []);

4. 确保标记数据渲染稳定性
   如果标记数据是动态获取的，用useState存储数据，确保组件渲染时数据已就绪：

import React, { useState, useEffect } from 'react';

const NewStoreLocator = () => {
  const [markers, setMarkers] = useState([]);
  const storeMarkers = [/* 你的标记数据 */];

  useEffect(() => {
    // 模拟异步加载标记数据
    setMarkers(storeMarkers);
  }, []);

  return (
    <MapView /* 其他属性 */>
      {markers.map((marker, index) => (
        <Marker
          key={`${marker.latitude}-${marker.longitude}-${index}`}
          coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
          title={marker.title}
          description={marker.description}
        />
      ))}
    </MapView>
  );
};

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