如何在使用动画标记时优化React Native地图的性能

Question

我正在尝试优化react-native-maps的性能。 这是我的自定义标记

export function usePrevious(value) {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

function VehicleMarker({CarSetting, car, onOpen}) {
  const [marker, setMarker] = useState(null);
  const [CarIcon, setCarIcon] = useState(Car);
  const [coordinate] = useState(
    new AnimatedRegion({
      latitude: car.Lt,
      longitude: car.Ln,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    }),
  );
  const [CarType, setCarType] = useState(0);
  const [tracksViewChanges, setTracksViewChanges] = useState(false);

  const prevCoordinate = usePrevious(coordinate);

  useEffect(() => {
    if (prevCoordinate !== coordinate) {
      setTracksViewChanges(true);
    } else {
      setTracksViewChanges(false);
    }
  }, [coordinate]);

  useEffect(() => {
    animateMarker();
    setCarIcon(getCarImage(CarSetting, car));
    setCarType(
      CarSetting?.find(setting => setting.CarID == car.CarID)?.CarTypeID,
    );
  }, [car]);

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

    if (Platform.OS === 'android') {
      if (marker) {
        marker.animateMarkerToCoordinate(newCoordinate, 5000);
      }
    } else {
      coordinate.timing(newCoordinate).start();
    }
  };

  return (
    <Marker.Animated
      key={car.CarID}
      ref={marker => {
        setMarker(marker);
      }}
      coordinate={coordinate}
      onPress={onOpen}
      anchor={{x: 0.5, y: 0.5}}
      rotation={CarType == 0 ? 360 - car.Angle : 0}
      tracksViewChanges={tracksViewChanges}>
      <Animated.View style={styles.markerWrap}>
        <Animated.Image source={CarIcon} style={styles.marker} />
      </Animated.View>
    </Marker.Animated>
  );
}

我有大约80辆车，其中一半总是在行驶中，我每15秒更新它们的坐标。每辆车都有一个标记牌号（因为我不想让它旋转，所以我将其克隆到另一个组件中）。

当车辆数量少于30时，它运行得很顺畅。但超过30辆时就会变得卡顿。我不能将它们聚类，因为我们的客户想要看到所有车辆。

有什么解决方案吗？

- Zuet

Answer 1

我的解决方案是降低图像的分辨率（到我想要的大小，例如30x30像素），并使用图标代替图像。

      <Marker.Animated
        ref={marker => {
          setVehicle(marker);
        }}
        coordinate={coordinate}
        onPress={onOpen}
        anchor={{x: 0.5, y: 0.5}}
        rotation={CarType == 0 ? 360 - car.Angle : 0}
        tracksViewChanges={tracksViewChanges}
        icon={CarIcon}>
        {/* <Animated.View style={styles.markerWrap}>
          <Animated.Image source={CarIcon} style={styles.marker} />
        </Animated.View> */}
      </Marker.Animated>

- Zuet