feat: 适配 headerbar ios26

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}>
         {/* 取景框容器 */}