feat: 抽离 imaghe 组件，为图片增加 header

app/(tabs)/challenges.tsx

@@ -2,6 +2,7 @@ import dayjs from 'dayjs';
 
 import ChallengeProgressCard from '@/components/challenges/ChallengeProgressCard';
 import { ConfirmationSheet } from '@/components/ui/ConfirmationSheet';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
@@ -23,7 +24,6 @@ import {
 import { Toast } from '@/utils/toast.utils';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

app/(tabs)/medications.tsx

@@ -4,6 +4,7 @@ import { MedicationCard } from '@/components/medication/MedicationCard';
 import { TakenMedicationsStack } from '@/components/medication/TakenMedicationsStack';
 import { ThemedText } from '@/components/ThemedText';
 import { IconSymbol } from '@/components/ui/IconSymbol';
+import { Image } from '@/components/ui/Image';
 import { MedicalDisclaimerSheet } from '@/components/ui/MedicalDisclaimerSheet';
 import { MedicationAiSummaryInfoSheet } from '@/components/ui/MedicationAiSummaryInfoSheet';
 import { Colors } from '@/constants/Colors';
@@ -20,7 +21,6 @@ import { useFocusEffect } from '@react-navigation/native';
 import dayjs, { Dayjs } from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

app/(tabs)/personal.tsx

@@ -11,6 +11,7 @@ import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
+import { Image } from '@/components/ui/Image';
 import type { BadgeDto } from '@/services/badges';
 import { reportBadgeShowcaseDisplayed } from '@/services/badges';
 import { updateUser, type UserLanguage } from '@/services/users';
@@ -24,7 +25,6 @@ import { Ionicons } from '@expo/vector-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

app/badges/index.tsx

@@ -1,14 +1,14 @@
+import { BadgeShowcaseModal } from '@/components/badges/BadgeShowcaseModal';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import type { BadgeDto } from '@/services/badges';
 import { fetchAvailableBadges, selectBadgesLoading, selectSortedBadges } from '@/store/badgesSlice';
 import { DEFAULT_MEMBER_NAME, selectUserProfile } from '@/store/userSlice';
-import { BadgeShowcaseModal } from '@/components/badges/BadgeShowcaseModal';
 import { Toast } from '@/utils/toast.utils';
 import { Ionicons } from '@expo/vector-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import * as Haptics from 'expo-haptics';
-import { Image } from 'expo-image';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FlatList, Pressable, RefreshControl, StyleSheet, Text, View } from 'react-native';

app/challenges/[id]/index.tsx

@@ -1,6 +1,7 @@
 import ChallengeProgressCard from '@/components/challenges/ChallengeProgressCard';
 import { ChallengeRankingItem } from '@/components/challenges/ChallengeRankingItem';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
@@ -33,7 +34,6 @@ import { BlurView } from 'expo-blur';
 import * as Clipboard from 'expo-clipboard';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import * as Haptics from 'expo-haptics';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import LottieView from 'lottie-react-native';

app/challenges/create-custom.tsx

@@ -1,8 +1,8 @@
+import { Image } from '@/components/ui/Image';
 import i18n from '@/i18n';
 import dayjs from 'dayjs';
 import { BlurView } from 'expo-blur';
 import * as Clipboard from 'expo-clipboard';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';

app/coach.tsx

@@ -18,6 +18,7 @@ import {
 import Animated, { FadeInDown, FadeInUp, Layout } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { getTabBarBottomPadding } from '@/constants/TabBar';
 import { useAppSelector } from '@/hooks/redux';
@@ -29,7 +30,6 @@ import { loadAiCoachSessionCache, saveAiCoachSessionCache } from '@/services/aiC
 import { api, getAuthToken, postTextStream } from '@/services/api';
 import { selectLatestMoodRecordByDate } from '@/store/moodSlice';
 import { generateWelcomeMessage, hasRecordedMoodToday } from '@/utils/welcomeMessage';
-import { Image } from 'expo-image';
 import { HistoryModal } from '../components/model/HistoryModal';
 import { ActionSheet } from '../components/ui/ActionSheet';
 

app/food-library.tsx

@@ -1,6 +1,7 @@
 import { CreateCustomFoodModal, type CustomFoodData } from '@/components/model/food/CreateCustomFoodModal';
 import { FoodDetailModal } from '@/components/model/food/FoodDetailModal';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { DEFAULT_IMAGE_FOOD } from '@/constants/Image';
 import { useAppDispatch } from '@/hooks/redux';
@@ -13,7 +14,6 @@ import { fetchDailyNutritionData } from '@/store/nutritionSlice';
 import type { FoodItem, MealType, SelectedFoodItem } from '@/types/food';
 import { saveNutritionToHealthKit } from '@/utils/health';
 import { Ionicons } from '@expo/vector-icons';
-import { Image } from 'expo-image';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useEffect, useMemo, useState } from 'react';
 import {

app/food/analysis-result.tsx

@@ -1,5 +1,6 @@
 import { CircularRing } from '@/components/CircularRing';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { ROUTES } from '@/constants/Routes';
 import { useAppSelector } from '@/hooks/redux';
@@ -9,7 +10,6 @@ import { addDietRecord, type CreateDietRecordDto, type MealType } from '@/servic
 import { selectFoodRecognitionResult } from '@/store/foodRecognitionSlice';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useEffect, useState } from 'react';

app/food/camera.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -6,7 +7,6 @@ import { useI18n } from '@/hooks/useI18n';
 import { Ionicons } from '@expo/vector-icons';
 import { CameraType, CameraView, useCameraPermissions } from 'expo-camera';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';

app/food/food-recognition.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useMembershipModal } from '@/contexts/MembershipModalContext';
 import { useAppDispatch } from '@/hooks/redux';
@@ -11,7 +12,6 @@ import { recognizeFood } from '@/services/foodRecognition';
 import { saveRecognitionResult, setError, setLoading } from '@/store/foodRecognitionSlice';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useEffect, useState } from 'react';

app/food/nutrition-analysis-history.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useI18n } from '@/hooks/useI18n';
 import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
@@ -13,7 +14,6 @@ import { triggerLightHaptic } from '@/utils/haptics';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useState } from 'react';

app/food/nutrition-label-analysis.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useCosUpload } from '@/hooks/useCosUpload';
@@ -12,7 +13,6 @@ import { triggerLightHaptic } from '@/utils/haptics';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';

app/gallery/index.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image as ExpoImage } from '@/components/ui/Image';
 import { useMembershipModal } from '@/contexts/MembershipModalContext';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useVipService } from '@/hooks/useVipService';
@@ -9,7 +10,6 @@ import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
 import * as FileSystem from 'expo-file-system/legacy';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image as ExpoImage } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import * as MediaLibrary from 'expo-media-library';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

app/health/profile.tsx

@@ -5,6 +5,7 @@ import { HealthHistoryTab } from '@/components/health/tabs/HealthHistoryTab';
 import { MedicalRecordsTab } from '@/components/health/tabs/MedicalRecordsTab';
 import { ConfirmationSheet } from '@/components/ui/ConfirmationSheet';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { ROUTES } from '@/constants/Routes';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
@@ -16,15 +17,14 @@ import {
   joinFamilyGroup,
   selectFamilyGroup,
 } from '@/store/familyHealthSlice';
-import { 
+import {
   fetchHealthHistory,
-  selectHealthHistoryProgress 
+  selectHealthHistoryProgress
 } from '@/store/healthSlice';
 import { DEFAULT_MEMBER_NAME } from '@/store/userSlice';
 import { Toast } from '@/utils/toast.utils';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Stack, useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';

app/medications/[medicationId].tsx

@@ -2,6 +2,7 @@ import { ExpiryDatePickerModal } from '@/components/medications/ExpiryDatePicker
 import { ThemedText } from '@/components/ThemedText';
 import { ConfirmationSheet } from '@/components/ui/ConfirmationSheet';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import InfoCard from '@/components/ui/InfoCard';
 import { Colors } from '@/constants/Colors';
 import { DOSAGE_UNITS, DOSAGE_VALUES, FORM_OPTIONS } from '@/constants/Medication';
@@ -37,7 +38,6 @@ import { Picker } from '@react-native-picker/picker';
 import Voice from '@react-native-voice/voice';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';

app/medications/add-medication.tsx

@@ -1,6 +1,7 @@
 import { ThemedText } from '@/components/ThemedText';
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { IconSymbol } from '@/components/ui/IconSymbol';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { DOSAGE_UNITS, FORM_OPTIONS } from '@/constants/Medication';
 import { useAppDispatch } from '@/hooks/redux';
@@ -15,7 +16,6 @@ import { Picker } from '@react-native-picker/picker';
 import Voice from '@react-native-voice/voice';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';

app/medications/ai-camera.tsx

@@ -1,5 +1,6 @@
 import { MedicationPhotoGuideModal } from '@/components/medications/MedicationPhotoGuideModal';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -10,7 +11,6 @@ import { getItem, setItem } from '@/utils/kvStore';
 import { Ionicons } from '@expo/vector-icons';
 import { CameraView, useCameraPermissions } from 'expo-camera';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';

app/medications/ai-progress.tsx

@@ -1,11 +1,11 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors, palette } from '@/constants/Colors';
 import { useI18n } from '@/hooks/useI18n';
 import { getMedicationRecognitionStatus } from '@/services/medications';
 import { MedicationRecognitionTask } from '@/types/medication';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router, useLocalSearchParams } from 'expo-router';
 import React, { useEffect, useMemo, useRef, useState } from 'react';

app/medications/manage-medications.tsx

@@ -2,6 +2,7 @@ import { ThemedText } from '@/components/ThemedText';
 import { ConfirmationSheet } from '@/components/ui/ConfirmationSheet';
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { IconSymbol } from '@/components/ui/IconSymbol';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -18,7 +19,6 @@ import type { Medication, MedicationForm } from '@/types/medication';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import React, { useCallback, useMemo, useState } from 'react';

app/nutrition/records.tsx

@@ -3,6 +3,7 @@ import { DateSelector } from '@/components/DateSelector';
 import { FloatingFoodOverlay } from '@/components/FloatingFoodOverlay';
 import { NutritionRecordCard } from '@/components/NutritionRecordCard';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
@@ -27,7 +28,6 @@ import { Ionicons } from '@expo/vector-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import React, { useCallback, useEffect, useState } from 'react';

app/profile/edit.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -13,7 +14,6 @@ import { Ionicons } from '@expo/vector-icons';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { Picker } from '@react-native-picker/picker';
 import { useFocusEffect } from '@react-navigation/native';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { router } from 'expo-router';
 import React, { useEffect, useMemo, useState } from 'react';

app/sleep-detail.tsx

@@ -2,6 +2,7 @@ import { InfoModal, type SleepDetailData } from '@/components/sleep/InfoModal';
 import { SleepStagesInfoModal } from '@/components/sleep/SleepStagesInfoModal';
 import { SleepStageTimeline } from '@/components/sleep/SleepStageTimeline';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { useI18n } from '@/hooks/useI18n';
 import {
@@ -14,7 +15,6 @@ import {
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router, useLocalSearchParams } from 'expo-router';
 import React, { useCallback, useEffect, useState } from 'react';

app/water/detail.tsx

@@ -1,10 +1,10 @@
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { useWaterDataByDate } from '@/hooks/useWaterData';
 import { getQuickWaterAmount } from '@/utils/userPreferences';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router, useLocalSearchParams } from 'expo-router';
 import React, { useEffect, useState } from 'react';