React Native Maps点击Marker触发重绘问题及优化方案问询

你遇到的核心问题是currentMarkerCardId状态更新触发了组件全局重绘，导致MapView重置回初始位置还出现卡顿。我来分享几个针对性的优化方案，帮你实现无卡顿的Marker高亮效果：

1. 抽离Marker为独立的Memo组件 #

把Marker相关逻辑拆成单独的组件，并用React.memo包裹，这样只有当Marker的props变化时才会重新渲染，不会跟着父组件一起全局刷新：

import React, { memo } from 'react';
import { Marker } from 'react-native-maps';
import { Image } from 'react-native';

const ShopMarker = memo(({ shop, isInWallet, isCurrentMarker, onPress }) => {
  const latLng = { latitude: shop.latitude, longitude: shop.longitude };
  const iconSource = isInWallet 
    ? require('../assets/images/explorer/pin-on.png') 
    : require('../assets/images/explorer/pin-off.png');
  const iconStyle = isCurrentMarker ? styles.mapMarkerCurrent : styles.mapMarker;

  return (
    <Marker 
      key={shop.objectId} 
      coordinate={latLng} 
      onPress={() => onPress(shop.company.objectId, latLng)}
    >
      <Image 
        source={iconSource} 
        style={iconStyle} 
        resizeMode="cover" 
        resizeMethod="resize" 
      />
    </Marker>
  );
});

// 自定义比较函数，避免引用类型props导致不必要重绘
ShopMarker.displayName = 'ShopMarker';

2. 用useMemo缓存计算结果 #

你之前在renderMarkers里每次渲染都执行两次filter操作，这会加重渲染负担。用useMemo缓存这些计算结果，提升性能：

import { useMemo } from 'react';

function YourMapComponent() {
  // ... 其他状态和逻辑

  // 缓存过滤后的店铺列表
  const shopsFiltered = useMemo(() => {
    return shops.filter(shop => 
      shop.hasOwnProperty('latitude') && 
      shop.hasOwnProperty('longitude') && 
      shop.latitude && 
      shop.longitude
    );
  }, [shops]);

  // 缓存已在钱包中的公司ID集合（用Set优化查找效率）
  const walletCompanyIds = useMemo(() => {
    return new Set(
      cards.data
        .filter(card => card.hasOwnProperty('company'))
        .map(card => card.company.objectId)
    );
  }, [cards.data]);

  // 缓存Marker列表，避免每次渲染重新生成
  const renderMarkers = useMemo(() => {
    return shopsFiltered.map(shop => {
      const isInWallet = walletCompanyIds.has(shop.company?.objectId);
      const isCurrentMarker = shop.company.objectId === currentMarkerCardId;

      return (
        <ShopMarker
          key={shop.objectId}
          shop={shop}
          isInWallet={isInWallet}
          isCurrentMarker={isCurrentMarker}
          onPress={onMarkerPress}
        />
      );
    });
  }, [shopsFiltered, walletCompanyIds, currentMarkerCardId, onMarkerPress]);

  // ... 渲染MapView
}

3. 直接操作MapView实例避免重绘 #

用useRef获取MapView的引用，直接调用animateToRegion方法控制地图区域，不需要通过状态更新触发重绘，彻底解决动画被打断的问题：

import { useRef } from 'react';
import MapView from 'react-native-maps';

function YourMapComponent() {
  const mapRef = useRef(null);

  // ... 其他逻辑

  const onMarkerPress = (id, coordinate) => {
    setBottomBoxOpacity(1);
    setCurrentMarkerCardId(id);
    // 直接通过ref调用动画，不触发状态更新
    if (mapRef.current) {
      mapRef.current.animateToRegion({
        ...coordinate,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01, // 可根据需求调整缩放级别
      }, 500); // 动画时长（毫秒）
    }
  };

  return (
    <MapView
      ref={mapRef}
      region={initialRegion} // 仅绑定初始区域，后续通过ref控制
      moveOnMarkerPress={false}
      key="stable-map-key" // 添加稳定key，避免组件意外卸载重建
      // ... 其他MapView属性
    >
      {renderMarkers}
    </MapView>
  );
}

优化效果说明 #

• Memoized Marker组件：确保只有目标Marker的高亮状态或自身数据变化时才重绘，避免全局刷新。
• useMemo缓存计算：将O(n)的重复过滤操作转为O(1)的查找，大幅减少渲染开销。
• 直接操作MapView实例：跳过状态更新流程，既避免了地图重置，又能保证动画完整执行。

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