React Native Maps重启后渲染当前位置崩溃问题求助

1. 先解决初始化崩溃问题 #

重启崩溃的核心是初始渲染时location状态为undefined，直接访问location.coords会抛出错误。可以通过两种方式处理：

方式一：给状态设置默认值

const [location, setLocation] = useState({
  latitude: 24.8607,
  longitude: 67.0011,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421
});

这样即使还没获取到用户位置，MapView也会先渲染默认区域，不会崩溃。

方式二：用可选链+条件渲染

保持useState()的初始值，在渲染时做安全访问：

<MapView 
  initialRegion={location ? {
    latitude: location.latitude,
    longitude: location.longitude,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421
  } : {
    latitude: 24.8607,
    longitude: 67.0011,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421
  }}
  style={styles.map}
/>

或者用可选链简化：

initialRegion={{
  latitude: location?.latitude || 24.8607,
  longitude: location?.longitude || 67.0011,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421
}}

2. 实现重启后持续定位 #

原来的代码只在组件挂载时获取一次位置，重启后需要重新获取，而且要持续监听位置变化。改用watchPositionAsync来实现：

const Map = () => {
  // 给location设置默认区域，避免初始崩溃
  const [location, setLocation] = useState({
    latitude: 24.8607,
    longitude: 67.0011,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421
  });

  useEffect(() => {
    let locationSubscription;

    const setupLocation = async () => {
      // 请求权限
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        console.log("请授予位置权限");
        return;
      }

      // 持续监听位置变化，而不是只获取一次
      locationSubscription = await Location.watchPositionAsync(
        {
          accuracy: Location.Accuracy.High,
          timeInterval: 10000, // 每10秒更新一次（可调整）
          distanceInterval: 10 // 移动超过10米更新（可调整）
        },
        (newLocation) => {
          setLocation({
            ...newLocation.coords,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421
          });
        }
      );
    };

    setupLocation();

    // 组件卸载时清理订阅，避免内存泄漏
    return () => {
      if (locationSubscription) {
        locationSubscription.remove();
      }
    };
  }, []);

  return (
    <MapView 
      region={location} // 用region代替initialRegion，实现实时更新
      style={styles.map}
    />
  );
};

关键改动说明 #

• 用watchPositionAsync替代getCurrentPositionAsync，实现持续监听位置变化，重启App后会重新请求权限并开始监听，保证位置实时更新。
• 给location设置默认初始值，彻底避免初始渲染时的空值报错。
• 用region属性替代initialRegion，这样当location更新时，地图会自动跳转到新位置。
• 添加订阅清理逻辑，防止组件卸载后仍在监听位置导致内存泄漏。

内容的提问来源于stack exchange，提问作者Small Rad Comp.