add app/pages/home/maps/Cluster.js

Strides-SPAPP/app/pages/home/maps/Cluster.js

@@ -2,21 +2,30 @@
  * 地图聚合组件
  * @邠心vbe on 2021/08/13
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { Image, ImageBackground, StyleSheet, Text } from 'react-native';
 import { Marker } from 'react-native-maps';
 
 
 export const MyMarker = ({id, coordinate, onPress}) => {
+  const [tracksViewChanges, setTracksViewChanges] = useState(true);
+
+  const onImageLoad = () => {
+    // 图片加载完成后关闭 tracksViewChanges 以提升性能
+    setTimeout(() => setTracksViewChanges(false), 100);
+  };
+
   if (coordinate.upcoming) {
     return (
       <Marker
         key={id}
-        zIndex={1}
+        zIndex={20}
         coordinate={coordinate}
+        tracksViewChanges={tracksViewChanges}
         onPress={onPress}>
         <Image
           style={styles.marker}
+          onLoad={onImageLoad}
           source={require('../../../images/maps/ic_marker_upcoming.png')}/>
       </Marker>
     )
@@ -24,8 +33,9 @@ export const MyMarker = ({id, coordinate, onPress}) => {
     return (
       <Marker
         key={id}
-        zIndex={1}
+        zIndex={20}
         coordinate={coordinate}
+        tracksViewChanges={tracksViewChanges}
         onPress={onPress}
         style={ui.center}>
         { coordinate.hasLabel &&
@@ -37,16 +47,20 @@ export const MyMarker = ({id, coordinate, onPress}) => {
           ? coordinate.available
             ? <Image
                 style={styles.marker}
+                onLoad={onImageLoad}
                 source={require('../../../images/maps/ic_marker_star.png')}/>
             : <Image
                 style={styles.marker}
+                onLoad={onImageLoad}
                 source={require('../../../images/maps/ic_marker_unstar.png')}/>
           : coordinate.available
             ? <Image
                 style={styles.marker}
+                onLoad={onImageLoad}
                 source={require('../../../images/maps/ic_marker.png')}/>
             : <Image
                 style={styles.marker}
+                onLoad={onImageLoad}
                 source={require('../../../images/maps/ic_marker_un.png')}/>
         }
       </Marker>
@@ -57,21 +71,26 @@ export const MyMarker = ({id, coordinate, onPress}) => {
 export const MyCluster = (props) => {
   const {id, location, properties, onPress, available=false, onOpen} = props;
   const pointCount = props.pointCount ? props.pointCount : properties.point_count
+  const [tracksViewChanges, setTracksViewChanges] = useState(true);
   //console.log('renderCluster', props);
 
   return (
     <Marker
       key={id}
-      style={{ zIndex: pointCount + 1 }}
       coordinate={location}
-      zIndex={pointCount + 1}
+      zIndex={20}
+      tracksViewChanges={tracksViewChanges}
       onPress={() => onOpen ? onOpen(location) : onPress()}>
-      <ClusterView pointCount={pointCount} available={available}/>
+      <ClusterView 
+        pointCount={pointCount} 
+        available={available}
+        onLoad={() => setTimeout(() => setTracksViewChanges(false), 100)}
+      />
     </Marker>
   );
 }
 
-export const ClusterView = ({pointCount, available=false}) => {
+export const ClusterView = ({pointCount, available=false, onLoad}) => {
   const getStyle = (count) => {
     if (count >= 100) {
       return [ui.flexcc, styles.large];
@@ -84,6 +103,7 @@ export const ClusterView = ({pointCount, available=false}) => {
   return (
     <ImageBackground
       style={getStyle(pointCount)}
+      onLoad={onLoad}
       source={available
             ? require('../../../images/maps/ic_cluster.png')
             : require('../../../images/maps/ic_cluster_un.png')}>