我正在努力优化 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岁,就会变得滞后.我不能将它们组合在一起,因为我们的客户想要全部看到.
有什么解决办法吗?