React Native Array map遍历MapView时mapRef被覆盖仅最后一个地图适配路线怎么解决

核心问题为单个ref在循环渲染时被反复覆盖，仅保留了最后一个地图实例的引用，因此只有最后一个地图能触发路线适配，修改步骤如下：

1. 替换单个ref为多引用存储容器
   将原来的单个ref变量修改为对象类型的ref，用来存储所有地图的独立引用：

// 替换原 const mapRef = useRef(); 为以下代码
const mapRefs = useRef({});

2. 循环渲染时绑定独立引用
   在map循环渲染MapView时，通过当前循环的索引/ trip唯一id作为键，给每个地图实例绑定独立引用：

// map循环内的MapView组件修改ref属性
<MapView
  style={styles.maps}
  initialRegion={{
    latitude: 13.3379,
    longitude: 77.1173,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
  ref={el => mapRefs.current[key] = el} // key为当前循环的索引或trip唯一id
  zoomEnabled={true}
>

3. 适配路线时调用对应地图的引用
   在MapViewDirections的onReady回调中，读取当前循环对应地图的引用执行适配操作，增加非空判断避免报错：

<MapViewDirections
  origin={ori}
  destination={dest}
  apikey={"*******************************"}
  strokeWidth={3}
  strokeColor="hotpink"  
  optimizeWaypoints={true}
  onReady={(result) => {
    const currentMap = mapRefs.current[key];
    if (!currentMap) return;
    currentMap.fitToCoordinates(result.coordinates, {
      mapPadding: {
        right: Dimensions.get("window").width / 40,
        bottom: Dimensions.get("window").height / 70,
        left: Dimensions.get("window").width / 40,
        top: Dimensions.get("window").height / 70,
      },
    });
  }}
/>

注意事项 #

• 若dataSource会动态新增、删除或排序，不要用数组索引作为ref的键，改用每个trip数据里的唯一id（如trip_id），避免索引错位导致引用对应错误。
• 原代码中map回调没有显式return MapView组件，若实际渲染异常请补充return语句。
• 组件卸载时可通过useEffect的清理函数重置mapRefs.current = {}，避免内存泄漏。

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