React Native获取位置时出现MapMarker坐标必填项为空错误

错误信息 #

• 设备端提示：Error while updating property 'corrdinate' of view managed by: AIRMapMarker
• 控制台提示：ERROR Warning: Failed prop type: The prop coordinate.latitude is marked as required in MapMarker, but its value is null.

问题原因 #

初始状态下location为null，此时渲染用户位置的Marker时，coordinate.latitude和coordinate.longitude会因location && location.coords.latitude的逻辑返回null，而react-native-maps的Marker组件要求coordinate的经纬度必须是有效的非空数值，因此触发报错。

解决方案 #

方案1：条件渲染用户位置Marker #

仅在location存在且包含有效坐标时，才渲染标记用户位置的Marker：

<MapView
  style={{
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  }}
  initialRegion={{
    latitude: place.latitude,
    longitude: place.longitude,
    longitudeDelta: 0.01,
    latitudeDelta: 0.01,
  }}
>
  <Marker
    coordinate={{
      latitude: place.latitude,
      longitude: place.longitude,
    }}
  />

  {/* 仅当location存在时渲染用户位置Marker */}
  {location && location.coords && (
    <Marker
      title="Sua localização"
      coordinate={{
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      }}
    />
  )}
</MapView>

方案2：添加异常处理与默认值 #

在获取位置的异步函数中添加try/catch，避免获取位置失败导致location一直为null；同时可给location设置初始默认坐标（比如与place一致）：

useEffect(() => {
  (async () => {
    try {
      let { status } = await Position.requestBackgroundPermissionsAsync();

      if (status !== "granted") {
        setErrorMsg("App não tem permissão para acessar localizaçõa");
        return;
      }

      let location = await Position.getCurrentPositionAsync({
        accuracy: Position.Accuracy.High
      });
      setLocation(location);
    } catch (err) {
      setErrorMsg("Falha ao obter localização: " + err.message);
      // 设置默认坐标，避免Marker报错
      setLocation({ coords: { latitude: place.latitude, longitude: place.longitude } });
    }
  })();
}, []);

完整修改后的代码 #

import { useContext, useEffect, useState } from "react";
import Context from "../../global/Context";
import MapView, { Marker } from "react-native-maps";
import * as Position from "expo-location";
import {
  View,
  StyleSheet,
  ImageBackground,
  Dimensions,
  Text,
  TouchableOpacity,
} from "react-native";

const Location = (props) => {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  const { states } = useContext(Context);
  const place = states.place;

  useEffect(() => {
    (async () => {
      try {
        let { status } = await Position.requestBackgroundPermissionsAsync();

        if (status !== "granted") {
          setErrorMsg("App não tem permissão para acessar localizaçõa");
          return;
        }

        let location = await Position.getCurrentPositionAsync({
          accuracy: Position.Accuracy.High
        });
        setLocation(location);
      } catch (err) {
        setErrorMsg("Falha ao obter localização: " + err.message);
        setLocation({ coords: { latitude: place.latitude, longitude: place.longitude } });
      }
    })();
  }, []);

  let text = "Carregando...";
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);
  }

  return (
    <ImageBackground
      style={{ flex: 1 }}
      source={require("../../img/mypoint-wallpaper.jpg")}
    >
      <View style={styles.container}>
        <MapView
          style={{
            width: Dimensions.get("window").width,
            height: Dimensions.get("window").height,
          }}
          initialRegion={{
            latitude: place.latitude,
            longitude: place.longitude,
            longitudeDelta: 0.01,
            latitudeDelta: 0.01,
          }}
        >
          <Marker
            coordinate={{
              latitude: place.latitude,
              longitude: place.longitude,
            }}
          />

          {location && location.coords && (
            <Marker
              title="Sua localização"
              coordinate={{
                latitude: location.coords.latitude,
                longitude: location.coords.longitude,
              }}
            />
          )}
        </MapView>
        <Text style={styles.txtStyle}>{text}</Text>
      </View>
    </ImageBackground>
  );
};

内容的提问来源于stack exchange，提问作者Fran Fí de Nena