使用react-native-maps创建可编辑多边形时拖拽标记报错求助

我基于react-native-maps开发可编辑地理围栏功能，通过拖拽标记调整多边形顶点位置，但拖拽操作触发报错，以下是相关代码、报错情况及可行解决方案：

核心代码 #

import React, { useState } from 'react';
import { View } from 'react-native';
import MapView, { Polygon, Marker } from 'react-native-maps';

const EditableGeofence = () => {
  const [coordinates, setCoordinates] = useState([
    { latitude: 37.78825, longitude: -122.4324 },
    { latitude: 37.78825, longitude: -122.4354 },
    { latitude: 37.78525, longitude: -122.4354 },
    { latitude: 37.78525, longitude: -122.4324 },
  ]);

  const handleMarkerDragEnd = (index, event) => {
    const newCoordinates = [...coordinates];
    newCoordinates[index] = event.nativeEvent.coordinate;
    setCoordinates(newCoordinates);
  };

  return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{ flex: 1 }}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.01,
          longitudeDelta: 0.01,
        }}
      >
        <Polygon 
          coordinates={coordinates} 
          fillColor="rgba(0,200,0,0.3)" 
          strokeWidth={2} 
        />
        {coordinates.map((coord, index) => (
          <Marker
            key={index}
            coordinate={coord}
            draggable
            onDragEnd={(e) => handleMarkerDragEnd(index, e)}
          />
        ))}
      </MapView>
    </View>
  );
};

export default EditableGeofence;

典型报错示例 #

TypeError: undefined is not an object (evaluating 'event.nativeEvent.coordinate')
或
Invariant Violation: Changing the coordinate of a marker after it has been rendered is not supported

解决方案 #

1. 修正事件参数获取逻辑 #

部分react-native-maps版本中，onDragEnd的回调参数直接返回坐标对象，而非嵌套在nativeEvent中，可先打印日志确认结构：

const handleMarkerDragEnd = (index, event) => {
  console.log('拖拽事件参数:', event);
  // 根据日志输出调整坐标获取方式
  const newCoord = event.nativeEvent?.coordinate || event;
  const newCoordinates = [...coordinates];
  newCoordinates[index] = newCoord;
  setCoordinates(newCoordinates);
};

2. 替换Marker的key为唯一标识 #

使用数组索引作为key会导致数组元素顺序变化时组件复用异常，给每个坐标添加唯一id：

// 初始化状态
const [coordinates, setCoordinates] = useState([
  { id: 'vertex-1', latitude: 37.78825, longitude: -122.4324 },
  { id: 'vertex-2', latitude: 37.78825, longitude: -122.4354 },
  { id: 'vertex-3', latitude: 37.78525, longitude: -122.4354 },
  { id: 'vertex-4', latitude: 37.78525, longitude: -122.4324 },
]);

// 渲染Marker
{coordinates.map((coord) => (
  <Marker
    key={coord.id}
    coordinate={coord}
    draggable
    onDragEnd={(e) => handleMarkerDragEnd(coord.id, e)}
  />
))}

// 更新坐标的函数
const handleMarkerDragEnd = (vertexId, event) => {
  const newCoordinates = coordinates.map(vertex => 
    vertex.id === vertexId 
      ? { ...vertex, ...(event.nativeEvent?.coordinate || event) } 
      : vertex
  );
  setCoordinates(newCoordinates);
};

3. 检查版本兼容性 #

旧版本的react-native-maps存在拖拽功能的bug，尝试升级到稳定版本：

npm install react-native-maps@latest

若最新版存在兼容问题，可降级到已知稳定版本（如1.7.1）：

npm install react-native-maps@1.7.1

4. 确保状态更新的不可变性 #

必须创建新数组触发组件重渲染，禁止直接修改原数组：

// 正确写法
const newCoordinates = [...coordinates];
newCoordinates[index] = { ...newCoordinates[index], ...newCoord };
setCoordinates(newCoordinates);

// 错误写法（不会触发重渲染）
coordinates[index] = newCoord;
setCoordinates(coordinates);

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