feat: 适配 headerbar ios26

app/food/analysis-result.tsx

@@ -3,6 +3,7 @@ import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
 import { ROUTES } from '@/constants/Routes';
 import { useAppSelector } from '@/hooks/redux';
+import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
 import { addDietRecord, type CreateDietRecordDto, type MealType } from '@/services/dietRecords';
 import { selectFoodRecognitionResult } from '@/store/foodRecognitionSlice';
 import { Ionicons } from '@expo/vector-icons';
@@ -73,6 +74,7 @@ const MEAL_TYPE_MAP = {
 };
 
 export default function FoodAnalysisResultScreen() {
+  const safeAreaTop = useSafeAreaTop()
   const router = useRouter();
   const params = useLocalSearchParams<{
     imageUri?: string;
@@ -264,6 +266,9 @@ export default function FoodAnalysisResultScreen() {
           title="分析结果"
           onBack={() => router.back()}
         />
+        <View style={{
+          paddingTop: safeAreaTop
+        }} />
         <View style={styles.errorContainer}>
           <Text style={styles.errorText}>未找到图片或识别结果</Text>
         </View>
@@ -287,7 +292,9 @@ export default function FoodAnalysisResultScreen() {
         transparent={true}
       />
 
-      <ScrollView style={styles.scrollContainer} showsVerticalScrollIndicator={false}>
+      <ScrollView style={styles.scrollContainer} contentContainerStyle={{
+        paddingTop: safeAreaTop
+      }} showsVerticalScrollIndicator={false}>
         {/* 食物主图 */}
         <View style={styles.imageContainer}>
           {imageUri ? (

app/food/camera.tsx

@@ -1,5 +1,6 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
+import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
 import { Ionicons } from '@expo/vector-icons';
 import { CameraType, CameraView, useCameraPermissions } from 'expo-camera';
 import { Image } from 'expo-image';
@@ -8,21 +9,18 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useRef, useState } from 'react';
 import {
   Alert,
-  Dimensions,
   Modal,
   StatusBar,
   StyleSheet,
   Text,
   TouchableOpacity,
-  View,
+  View
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
 
-const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
-
 export default function FoodCameraScreen() {
+  const safeAreaTop = useSafeAreaTop()
   const router = useRouter();
   const params = useLocalSearchParams<{ mealType?: string }>();
   const cameraRef = useRef<CameraView>(null);
@@ -45,28 +43,34 @@ export default function FoodCameraScreen() {
   if (!permission) {
     // 权限仍在加载中
     return (
-      <SafeAreaView style={styles.container}>
+      <View style={styles.container}>
         <HeaderBar
           title="食物拍摄"
           onBack={() => router.back()}
           transparent={true}
         />
+        <View style={{
+          paddingTop: safeAreaTop
+        }} />
         <View style={styles.loadingContainer}>
           <Text style={styles.loadingText}>正在加载相机...</Text>
         </View>
-      </SafeAreaView>
+      </View>
     );
   }
 
   if (!permission.granted) {
     // 没有相机权限
     return (
-      <SafeAreaView style={styles.container}>
+      <View style={styles.container}>
         <HeaderBar
           title="食物拍摄"
           onBack={() => router.back()}
           backColor='#ffffff'
         />
+        <View style={{
+          paddingTop: safeAreaTop
+        }} />
         <View style={styles.permissionContainer}>
           <Ionicons name="camera-outline" size={64} color="#999" />
           <Text style={styles.permissionTitle}>需要相机权限</Text>
@@ -80,7 +84,7 @@ export default function FoodCameraScreen() {
             <Text style={styles.permissionButtonText}>授权访问</Text>
           </TouchableOpacity>
         </View>
-      </SafeAreaView>
+      </View>
     );
   }
 
@@ -152,7 +156,9 @@ export default function FoodCameraScreen() {
         transparent={true}
         backColor={'#fff'}
       />
-
+      <View style={{
+        paddingTop: safeAreaTop
+      }} />
       {/* 主要内容区域 */}
       <View style={styles.contentContainer}>
         {/* 取景框容器 */}

app/food/food-recognition.tsx

@@ -2,6 +2,7 @@ import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch } from '@/hooks/redux';
 import { useCosUpload } from '@/hooks/useCosUpload';
+import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
 import { recognizeFood } from '@/services/foodRecognition';
 import { saveRecognitionResult, setError, setLoading } from '@/store/foodRecognitionSlice';
 import { Ionicons } from '@expo/vector-icons';
@@ -22,6 +23,7 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function FoodRecognitionScreen() {
+  const safeAreaTop = useSafeAreaTop()
   const router = useRouter();
   const params = useLocalSearchParams<{
     imageUri?: string;
@@ -217,6 +219,9 @@ export default function FoodRecognitionScreen() {
           title="食物识别"
           onBack={() => router.back()}
         />
+        <View style={{
+          paddingTop: safeAreaTop
+        }} />
         <View style={styles.errorContainer}>
           <Text style={styles.errorText}>未找到图片</Text>
         </View>
@@ -232,7 +237,9 @@ export default function FoodRecognitionScreen() {
       />
 
       {/* 主要内容区域 */}
-      <ScrollView style={styles.contentContainer} showsVerticalScrollIndicator={false}>
+      <ScrollView style={styles.contentContainer} contentContainerStyle={{
+        paddingTop: safeAreaTop
+      }} showsVerticalScrollIndicator={false}>
         {!showRecognitionProcess ? (
           // 确认界面
           <>