React Native中在地图上显示Marker时出现渲染错误的排查

我在React Native中使用<MapView.Marker>在地图上显示餐厅标记时出现渲染错误，但当前可以正常显示搜索到的任意城市的缩放地图。

以下是我的map.screen.js代码：

import React, { useContext, useState, useEffect } from "react";
import MapView from "react-native-maps";
import styled from "styled-components/native";
import { Search } from "../components/search.component";
import { LocationContext } from "../../../services/location/location.context";
import { RestaurantsContext } from "../../../services/restaurants/restaurant.context";

const Map = styled(MapView)`
  height: 100%;
  width: 100%;
`;

export const MapScreen = () => {
  const { location } = useContext(LocationContext);
  const { restaurants = [] } = useContext(RestaurantsContext);

  const [latDelta, setLatDelta] = useState(0);

  const { lat, lng, viewport } = location;

  useEffect(() => {
    const northeastLat = viewport.northeast.lat;
    const southwestLat = viewport.southwest.lat;

    setLatDelta(northeastLat - southwestLat);
  }, [location, viewport]);

  return (
    <>
      <Search />
      <Map
        region={{
          latitude: lat,
          longitude: lng,
          latitudeDelta: latDelta,
          longitudeDelta: 0.02,
        }}
      >
        {restaurants.map((restaurant) => {
          return (
            <MapView.Marker
              key={restaurant.name}
              title={restaurant.name}
              coordinate={{
                latitude: restaurant.geometry.location.lat,
                longitude: restaurant.geometry.location.lng,
              }}
            />
          );
        })}
      </Map>
    </>
  );
};

解决方法 #

1. 校验餐厅数据完整性 #

渲染错误大概率是部分餐厅数据缺失坐标字段或字段无效，添加校验跳过异常数据：

{restaurants.map((restaurant) => {
  // 跳过坐标不完整的餐厅
  if (!restaurant?.geometry?.location?.lat || !restaurant?.geometry?.location?.lng) {
    return null;
  }
  return (
    <MapView.Marker
      key={restaurant.id || restaurant.name} // 优先用唯一ID作为key，避免名称重复冲突
      title={restaurant.name}
      coordinate={{
        latitude: restaurant.geometry.location.lat,
        longitude: restaurant.geometry.location.lng,
      }}
    />
  );
})}

2. 处理location未加载的情况 #

当location还未获取到时，直接解构字段会引发错误，添加加载判断：

export const MapScreen = () => {
  const { location } = useContext(LocationContext);
  const { restaurants = [] } = useContext(RestaurantsContext);

  const [latDelta, setLatDelta] = useState(0);

  // 未获取到location时显示加载状态
  if (!location) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>加载中...</Text>
      </View>
    );
  }

  const { lat, lng, viewport } = location;

  useEffect(() => {
    // 校验viewport字段有效性
    if (!viewport?.northeast?.lat || !viewport?.southwest?.lat) return;
    const northeastLat = viewport.northeast.lat;
    const southwestLat = viewport.southwest.lat;

    setLatDelta(northeastLat - southwestLat);
  }, [location, viewport]);

  // 其余代码保持不变
};

3. 排查版本兼容性 #

确保react-native-maps版本与你的React Native版本兼容，可前往官方文档确认版本匹配关系，必要时升级或降级依赖。

4. 清理缓存重建项目 #

缓存异常也可能导致渲染问题，执行以下命令：

# 清除npm缓存
npm cache clean --force
# 重置Metro缓存
npx react-native start --reset-cache
# 重新构建项目
npx react-native run-android # 针对Android
# npx react-native run-ios # 针对iOS

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