我正在努力优化 react native map 的性能. 这是我定制的Marker

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岁,就会变得滞后.我不能将它们组合在一起,因为我们的客户想要全部看到.

有什么解决办法吗?

enter image description here

推荐答案

我的解决方案是降低图像的分辨率(到我想要的大小,在我的例子中是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>

React-native相关问答推荐

react 本机函数不通过usContext触发

try 使用JWT-DECODE解码令牌时出错

React Native 中的视图与 Flex 不占用相同的高度空间

React Native 无法下载模板

元素类型无效:应为字符串

根据搜索字符串中的每个字母过滤数组

如何在 React Native 中获取 TextInput 相对于其父级或屏幕的光标位置

如何解决react-navigation 问题:Animated: `useNativeDriver` is not supported because the native animated module is missing.?

我可以在 react-native 中使用 reactJS 库吗?

错误:无法解析模块`buffer`

如何使用 Typescript 在无状态组件上设置 navigationOptions

react-native Http 拦截器

react-native图标

TypeError : props.navigation.getParam 不是函数. In(props.navigation.getParam('name')

使用 typescript react-native - 如何使用来自 @react-navigation/native 的 useRoute 和 typescript

在 React 中调用 getDerivedStateFromProps 中的方法

如何升级 react-native gradle 版本

React Native + Redux 基本认证

无法解析模块react-native-screen

React-Native 水平滚动视图分页:预览下一页/卡片