多Animated Marker场景下React Native Maps性能优化方案咨询

一、自定义Marker组件代码优化 #

1. 移除不必要的Animated嵌套 #

当前组件中Animated.View和Animated.Image无额外动画逻辑，可替换为普通View和Image，减少Animated组件带来的性能开销：

// 替换原返回部分的Animated组件
return (
  <Marker.Animated
    key={car.CarID}
    ref={markerRef}
    coordinate={coordinate}
    onPress={onOpen}
    anchor={{x: 0.5, y: 0.5}}
    rotation={CarType === 0 ? 360 - car.Angle : 0}
    tracksViewChanges={tracksViewChanges}>
    <View style={styles.markerWrap}>
      <Image source={CarIcon} style={styles.marker} />
    </View>
  </Marker.Animated>
);

2. 优化tracksViewChanges逻辑 #

仅在标记视图内容（图标、旋转角度）变化时临时开启tracksViewChanges，完成后关闭，避免强制重绘：

// 替换原prevCoordinate相关的useEffect
const [tracksViewChanges, setTracksViewChanges] = useState(false);

useEffect(() => {
  setTracksViewChanges(true);
  // 视图更新后关闭tracksViewChanges
  const timer = setTimeout(() => setTracksViewChanges(false), 100);
  return () => clearTimeout(timer);
}, [CarIcon, CarType]);

3. 缓存计算结果避免重复执行 #

用useMemo缓存getCarImage和CarType的计算结果，减少每次渲染的重复计算：

// 替换原CarIcon和CarType的useState
const CarIcon = useMemo(() => getCarImage(CarSetting, car), [CarSetting, car.CarID]);
const CarType = useMemo(() => {
  return CarSetting?.find(setting => setting.CarID === car.CarID)?.CarTypeID ?? 0;
}, [CarSetting, car.CarID]);

4. 简化Ref处理 #

用useRef替代useState保存Marker实例，避免不必要的组件重渲染：

const markerRef = useRef(null);

// 在Marker.Animated中使用ref={markerRef}

5. 优化动画逻辑 #

跳过微小坐标变化的动画，缩短动画时长，并使用useCallback缓存动画函数：

const animateMarker = useCallback(() => {
  const newCoordinate = {
    latitude: car.Lt,
    longitude: car.Ln,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  };

  // 跳过坐标变化极小的动画
  const latDiff = Math.abs(coordinate.latitude - newCoordinate.latitude);
  const lngDiff = Math.abs(coordinate.longitude - newCoordinate.longitude);
  if (latDiff < 0.00001 && lngDiff < 0.00001) return;

  const animationDuration = 1500; // 缩短动画时长
  if (Platform.OS === 'android') {
    markerRef.current?.animateMarkerToCoordinate(newCoordinate, animationDuration);
  } else {
    coordinate.timing({
      ...newCoordinate,
      duration: animationDuration,
      easing: Easing.linear,
    }).start();
  }
}, [car.Lt, car.Ln, coordinate]);

// 调用animateMarker的useEffect依赖改为缓存后的函数
useEffect(() => {
  animateMarker();
}, [animateMarker]);

二、全局地图与数据优化 #

1. 减少标记数量与复杂度 #

• 将车牌标记与车辆图标合并：提前生成包含车牌的车辆图标（服务端或本地合成），将单个车辆的2个标记合并为1个，直接减少50%的标记渲染量。
• 压缩标记图标：使用小尺寸、高压缩率的PNG图片，避免大图占用过多内存与绘制资源。

2. 地图组件属性优化 #

• 开启removeClippedSubviews：自动移除视口外的标记视图，大幅降低渲染压力：

<MapView
  ...
  removeClippedSubviews={true}
  style={{flex: 1}}
/>

• 关闭不必要的交互：如不需要用户定位、缩放或滚动，可关闭showsUserLocation、zoomEnabled、scrollEnabled等属性，减少地图事件处理开销。

3. 批量更新数据 #

每15秒更新坐标时，一次性替换整个车辆数据数组，避免单个元素更新触发多次列表重渲染：

// 示例：批量更新车辆数据
const updateVehicles = (newVehicles) => {
  setVehicles(newVehicles);
};

4. 平台专属优化 #

• Android：开启硬件加速（在AndroidManifest.xml的<application>标签添加android:hardwareAccelerated="true"），启用Hermes引擎提升JS执行效率。
• iOS：使用FastImage替代原生Image组件优化图片加载与缓存，确保地图使用Metal渲染框架（react-native-maps默认启用）。

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