expo-gaode-map 1.1.3 → 1.1.5

package/test/ClockMapView.tsx

@@ -0,0 +1,504 @@
+/*
+ * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @Date         : 2025-03-11 09:29:07
+ * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @LastEditTime : 2025-11-23 17:41:21
+ * @FilePath     : /expo-gaode-map/test/ClockMapView.tsx
+ * @Description  :
+ *
+ * Copyright (c) 2025 by 尚博信_王强, All Rights Reserved.
+ */
+import { Text, View } from "@/components/Themed";
+import useMap from "@/hook/useMap";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+import { useStyles, createStyleSheet } from "react-native-unistyles";
+// import {
+//   MapType,
+//   MapView,
+//   Circle,
+//   Marker,
+// } from "@/lib/amap3d";
+import { Marker, Circle, MapView, MapType } from 'expo-gaode-map'
+import { haversineDistance, isNotEmpty } from "@/utils/Fun";
+import { DebouncePressable } from "@/components/Debounce.Button";
+import { Image, InteractionManager, ActivityIndicator, StyleSheet } from "react-native";
+import ImageAsset from "@/assets";
+import usePermissions from "@/hook/usePermissions";
+import { FontAwesome } from "@expo/vector-icons";
+import useCameraStore, { Photo } from "@/store/useCameraStore";
+import CommonConstants from "@/hook/constants/CommonConstants";
+import useTeamsStore from "@/store/useTeamsStore";
+import Animated, { FadeIn } from "react-native-reanimated";
+import Button from "@/components/Button";
+
+const iconUri = Image.resolveAssetSource(ImageAsset.positio_icon).uri;
+
+const ClockMapView = () => {
+
+  const { styles, theme } = useStyles(styleSheet);
+  const { isLocationPermissions } = usePermissions();
+  const { photo, setPhoto } = useCameraStore();
+  const { clockType } = useTeamsStore();
+  const [isInitializing, setIsInitializing] = useState(true);
+
+  const {
+    mapViewRef,
+    data,
+    takePhoto,
+    ClockIn,
+    moveToCurrentLocation,
+    clockInCoord,
+    chooseClockRule,
+    clockRuleIndex,
+    clockRule,
+    chooseShift,
+    shifts,
+    shiftIndex,
+    clockRange,
+    setIsWithinRange,
+    isWithinRange,
+    mapState,
+    setMapState,
+    getClockInRule,
+    isSupportOutWork,
+    initialPosition
+
+  } = useMap();
+
+
+  let timers = useRef<NodeJS.Timeout | number>(0);
+
+  // 所有的 useMemo 和其他 Hooks 必须在组件顶层调用
+  const mapView = useMemo(() => {
+    // ✅ 必须等待 initialPosition 准备好才渲染 MapView
+    if (!initialPosition) {
+      return null;
+    }
+    
+    return (
+        <Animated.View style={{ flex: 1 }}>
+          <MapView
+            style={{ flex: 1 }}
+            ref={mapViewRef}
+            onLoad={(nativeEvent) => {
+              console.log('onLoad', nativeEvent)
+              setMapState(false);
+            }}
+            indoorViewEnabled={true}
+            zoomGesturesEnabled={true}
+            buildingsEnabled={true}
+            userLocationRepresentation={{
+              showsAccuracyRing: false,
+              image: iconUri,
+              imageWidth: 40,
+              imageHeight: 40,
+            }}
+            trafficEnabled={true}
+            zoomControlsEnabled={false}
+            scaleControlsEnabled={false}
+            tiltGesturesEnabled={false}
+            compassEnabled={false}
+            followUserLocation={false}
+            // onCameraIdle={({ nativeEvent }) => {}}
+            onLocation={({ nativeEvent }) => {
+              const { latitude, longitude } = nativeEvent;
+              if (!latitude || !longitude) return;
+              let index = clockInCoord.some((item) => {
+                const distance = haversineDistance(
+                  {
+                    latitude: item.lat || 0,
+                    longitude: item.lon || 0,
+                  },
+                  {
+                    latitude: latitude || 0,
+                    longitude: longitude || 0,
+                  }
+                );
+                if (distance <= clockRange) {
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+              setIsWithinRange(index);
+            }}
+            distanceFilter={1}
+            // myLocationIcon={true}
+            myLocationEnabled={true}
+            initialCameraPosition={initialPosition || { 
+              target: { latitude: 39.9, longitude: 116.4 }, 
+              zoom: 15 
+            }}>
+
+            {clockInCoord &&
+              clockInCoord?.length > 0 &&
+              clockInCoord.map((item, index) => {
+                if (!item?.lat || !item?.lon) return null;
+
+                // ✅ 使用基于坐标的稳定 key，而不是 index
+                const stableKey = `${item.lat.toFixed(6)}-${item.lon.toFixed(6)}`;
+
+                return (
+                  <React.Fragment key={stableKey}>
+                    <Circle
+                      center={{
+                        latitude: item?.lat || 39.908692,
+                        longitude: item?.lon || 116.397477,
+                      }}
+                      radius={clockRange}
+                      zIndex={1000}
+                      strokeWidth={2}
+                      strokeColor={theme.colors.primary}
+                      fillColor="rgba(43, 133, 255, 0.3)"
+                    />
+                    <Marker
+                      position={{
+                        latitude: item?.lat || 39.908692,
+                        longitude: item?.lon || 116.397477,
+                      }}
+                      draggable={true}
+                      zIndex={1000}
+                    >
+                      <View style={styles.markerContainer}>
+                        <Text style={styles.markerText}>
+                          {clockRule[clockRuleIndex]?.positionName}
+                        </Text>
+                      </View>
+                    </Marker>
+                  </React.Fragment>
+                );
+              })}
+
+          </MapView>
+          <DebouncePressable
+            style={styles.orientationView}
+            onPress={() => {
+              moveToCurrentLocation();
+            }}
+          >
+            <Image source={ImageAsset.orientation} style={styles.orientation} />
+          </DebouncePressable>
+        </Animated.View>
+      );
+  }, [
+    data.location?.address,
+    mapViewRef,
+    mapState,
+    clockInCoord,
+    clockRange,
+    isLocationPermissions,
+    initialPosition,
+    clockRuleIndex
+  ]);
+
+
+
+  //底部打卡按钮
+  const clockButton = useMemo(() => {
+    // 添加初始加载状态检查
+    if (!data.location?.address || mapState || clockInCoord.length === 0) {
+      return (
+        <Animated.View style={styles.buttonView} exiting={FadeIn.duration(300)}>
+          <View style={styles.buttonDisabled}>
+            <Text style={styles.buttonDisabledText}>
+              正在获取位置信息...
+            </Text>
+          </View>
+        </Animated.View>
+      );
+    }
+
+    if (clockType === 1000) {
+      return (
+        <Animated.View style={styles.buttonView} exiting={FadeIn.duration(300)}>
+          <View style={styles.buttonDisabled}>
+            <Text style={styles.buttonDisabledText}>
+              不在考勤规则内,无法打卡
+            </Text>
+          </View>
+        </Animated.View>
+      );
+    } else {
+      return (
+        <Animated.View style={styles.buttonView} exiting={FadeIn.duration(300)}>
+          <Button
+            label={
+              !isWithinRange
+                ? isSupportOutWork ? clockType === 1001 ? '上班打卡(外勤)' : '下班打卡(外勤)' : "当前位置不在考勤范围无法打卡"
+                : clockType === 1001
+                  ? CommonConstants.clock_in
+                  : CommonConstants.clock_out
+            }
+            onPress={ClockIn}
+            style={[styles.button]}
+            labelStyle={[styles.buttonLabel]}
+          />
+        </Animated.View>
+      );
+    }
+  }, [data.location?.address, mapState, clockType, isWithinRange, clockInCoord, photo, isSupportOutWork]);
+
+
+  // 使用 useEffect 替代 useFocusEffect 来避免潜在的 Hook 顺序问题
+  useEffect(() => {
+    // 设置初始化状态
+    setIsInitializing(true);
+    //@ts-ignore
+    // setPhoto(undefined);
+
+    // 使用 InteractionManager 确保页面转场动画完成后再执行耗时操作
+    InteractionManager.runAfterInteractions(() => {
+      // 延迟获取考勤规则，让页面先渲染出来
+      timers.current = setTimeout(() => {
+        try {
+          getClockInRule().catch(err => {
+            console.error('获取考勤规则失败:', err);
+          }).finally(() => {
+            setIsInitializing(false);
+          });
+        } catch (error) {
+          console.error('获取考勤规则出错:', error);
+          setIsInitializing(false);
+        }
+      }, 1000);
+    });
+
+    // 添加安全机制：无论如何，2秒后强制结束加载状态
+    const timer = setTimeout(() => {
+      setIsInitializing(false);
+    }, 2000);
+
+    return () => {
+      clearTimeout(timer);
+      clearTimeout(timers.current);
+      setPhoto({} as Photo)
+    };
+  }, []);
+
+
+
+
+  return (
+    <Animated.View style={styles.container} exiting={FadeIn.duration(300)}>
+      {/* ✅ 加载状态：等待 initialPosition */}
+      {!initialPosition ? (
+        <View style={[StyleSheet.absoluteFill, styles.mapLoad]}>
+          <ActivityIndicator size="large" color={theme.colors.primary} />
+          <Text style={styles.loadingText}>正在初始化地图...</Text>
+        </View>
+      ) : (
+        <>
+          {mapView}
+        </>
+      )}
+      <View style={styles.mapView}>
+        <View style={styles.topView}>
+          <DebouncePressable
+            style={[styles.topLeftItem]}
+            onPress={() => {
+              chooseClockRule();
+            }}
+          >
+            <Text style={styles.topLeftText} numberOfLines={1}>
+              {clockRule[clockRuleIndex]?.ruleName ?? "请选择"}
+            </Text>
+            <FontAwesome
+              name="angle-down"
+              size={18}
+              color={theme.colors.text_placeholder}
+            />
+          </DebouncePressable>
+          <DebouncePressable
+            style={[styles.topLeftItem]}
+            onPress={() => {
+              chooseShift();
+            }}
+          >
+            <Text style={styles.topLeftText}>
+              {shifts[shiftIndex] ?? "请选择"}
+            </Text>
+            <FontAwesome
+              name="angle-down"
+              size={18}
+              color={theme.colors.text_placeholder}
+            />
+          </DebouncePressable>
+        </View>
+        <View>
+          <View style={styles.cameraView}>
+            <DebouncePressable onPress={takePhoto}  //disabled={!isWithinRange}
+            >
+              <Image
+                source={
+                  photo && isNotEmpty(photo?.content)
+                    ? { uri: photo.content }
+                    : ImageAsset.camera
+                }
+                style={styles.cameraIcon}
+              />
+              <Text style={styles.cameraText}>
+                {CommonConstants.take_photo_upload}
+              </Text>
+            </DebouncePressable>
+          </View>
+          <View style={styles.locationView}>
+            <Image source={ImageAsset.coordinate} style={styles.locationIcon} />
+            <Text style={styles.address}>{data.location?.address}</Text>
+          </View>
+        </View>
+      </View>
+      {initialPosition && clockButton}
+    </Animated.View>
+  )
+};
+
+export default React.memo(ClockMapView)
+
+const styleSheet = createStyleSheet((theme, tr) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  mapView: {
+    flex: 1,
+    width: "100%",
+    height: "50%",
+    backgroundColor: theme.colors.card,
+  },
+  mapLoad: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 99,
+    backgroundColor: theme.colors.background,
+  },
+  address: {
+    fontSize: 14,
+    color: theme.colors.timer,
+  },
+  orientationView: {
+    position: "absolute",
+    right: 5,
+    bottom: 0,
+    zIndex: 10,
+    width: 50,
+    height: 50,
+  },
+  orientation: {
+    width: 50,
+    height: 50,
+  },
+  locationView: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    gap: 5,
+    paddingHorizontal: 12,
+  },
+  locationIcon: {
+    width: 10,
+    height: 12,
+  },
+  cameraIcon: {
+    width: 90,
+    height: 90,
+    marginBottom: 5,
+    borderRadius: 5,
+  },
+  cameraText: {
+    fontSize: 14,
+    color: theme.colors.text,
+    fontWeight: "600",
+    alignSelf: "center",
+  },
+  cameraView: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  buttonView: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    bottom: 20,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 12,
+    backgroundColor: theme.colors.card,
+  },
+  button: {
+    height: 44,
+    width: "88%",
+  },
+  buttonLabel: {
+    fontSize: 14,
+    color: theme.colors.white,
+  },
+  buttonDisabled: {
+    backgroundColor: "#EFEFEF",
+    height: 44,
+    width: "88%",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 44,
+    gap: 10,
+    flexDirection: "row",
+  },
+  buttonDisabledText: {
+    fontSize: 14,
+    color: theme.colors.text_placeholder,
+  },
+  topView: {
+    flexDirection: "row",
+    padding: 5,
+    gap: 5,
+    marginBottom: 20,
+  },
+  topLeftItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderWidth: 1,
+    borderColor: theme.colors.primary,
+    borderRadius: 5,
+    paddingVertical: 5,
+    backgroundColor: theme.colors.primary_light,
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  topLeftText: {
+    fontSize: 12,
+    color: theme.colors.primary,
+    fontWeight: "600",
+    marginRight: 30,
+  },
+  markerText: {
+    fontSize: 12,
+    color: theme.colors.text,
+    fontWeight: "600",
+  },
+  markerContainer: {
+    backgroundColor: theme.colors.white,
+    borderRadius: 5,
+    padding: 5,
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "#ddd",
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.background,
+    flexDirection: 'row',
+    gap: 10,
+  },
+  loadingText: {
+    marginTop: 10,
+    fontSize: 14,
+    color: theme.colors.text_placeholder,
+  },
+}));