feat: 适配 headerbar ios26

app/mood/calendar.tsx

@@ -1,6 +1,7 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { useAppSelector } from '@/hooks/redux';
 import { useMoodData } from '@/hooks/useMoodData';
+import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
 import { getMoodOptions } from '@/services/moodCheckins';
 import { selectLatestMoodRecordByDate } from '@/store/moodSlice';
 import dayjs from 'dayjs';
@@ -8,7 +9,7 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { router, useFocusEffect, useLocalSearchParams } from 'expo-router';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
-  Dimensions, Image, SafeAreaView,
+  Dimensions, Image,
   ScrollView,
   StyleSheet,
   Text,
@@ -60,6 +61,7 @@ const generateCalendarData = (targetDate: Date) => {
 };
 
 export default function MoodCalendarScreen() {
+  const safeAreaTop = useSafeAreaTop()
   const params = useLocalSearchParams();
   const { fetchMoodRecords, fetchMoodHistoryRecords } = useMoodData();
 
@@ -231,7 +233,7 @@ export default function MoodCalendarScreen() {
       <View style={styles.decorativeCircle1} />
       <View style={styles.decorativeCircle2} />
 
-      <SafeAreaView style={styles.safeArea}>
+      <View style={styles.safeArea}>
         <HeaderBar
           title="心情日历"
           onBack={() => router.back()}
@@ -240,7 +242,9 @@ export default function MoodCalendarScreen() {
           tone="light"
         />
 
-        <ScrollView style={styles.content}>
+        <ScrollView style={styles.content} contentContainerStyle={{
+          paddingTop: safeAreaTop
+        }}>
           {/* 日历视图 */}
           <View style={styles.calendar}>
             {/* 月份导航 */}
@@ -363,7 +367,7 @@ export default function MoodCalendarScreen() {
             )}
           </View>
         </ScrollView>
-      </SafeAreaView>
+      </View>
     </View>
   );
 }

app/mood/edit.tsx

@@ -3,6 +3,7 @@ import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useColorScheme } from '@/hooks/useColorScheme';
+import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
 import { getMoodOptions, MoodType } from '@/services/moodCheckins';
 import {
   createMoodRecord,
@@ -28,9 +29,10 @@ import {
   TouchableOpacity,
   View
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function MoodEditScreen() {
+  const safeAreaTop = useSafeAreaTop()
+
   const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
   const colorTokens = Colors[theme];
   const params = useLocalSearchParams();
@@ -179,7 +181,7 @@ export default function MoodEditScreen() {
       {/* 装饰性圆圈 */}
       <View style={styles.decorativeCircle1} />
       <View style={styles.decorativeCircle2} />
-      <SafeAreaView style={styles.safeArea} edges={['top']}>
+      <View style={styles.safeArea} >
         <HeaderBar
           title={existingMood ? '编辑心情' : '记录心情'}
           onBack={() => router.back()}
@@ -196,81 +198,83 @@ export default function MoodEditScreen() {
           <ScrollView
             ref={scrollViewRef}
             style={styles.content}
-            contentContainerStyle={styles.scrollContent}
+            contentContainerStyle={[styles.scrollContent, {
+              paddingTop: safeAreaTop
+            }]}
             keyboardShouldPersistTaps="handled"
             showsVerticalScrollIndicator={false}
           >
-          {/* 日期显示 */}
-          <View style={styles.dateSection}>
-            <Text style={styles.dateTitle}>
-              {dayjs(selectedDate).format('YYYY年M月D日')}
-            </Text>
-          </View>
-
-          {/* 心情选择 */}
-          <View style={styles.moodSection}>
-            <Text style={styles.sectionTitle}>选择心情</Text>
-            <View style={styles.moodOptions}>
-              {moodOptions.map((mood, index) => (
-                <TouchableOpacity
-                  key={index}
-                  style={[
-                    styles.moodOption,
-                    selectedMood === mood.type && styles.selectedMoodOption
-                  ]}
-                  onPress={() => setSelectedMood(mood.type)}
-                >
-                  <Image source={mood.image} style={styles.moodImage} />
-                  <Text style={styles.moodLabel}>{mood.label}</Text>
-                </TouchableOpacity>
-              ))}
+            {/* 日期显示 */}
+            <View style={styles.dateSection}>
+              <Text style={styles.dateTitle}>
+                {dayjs(selectedDate).format('YYYY年M月D日')}
+              </Text>
             </View>
-          </View>
 
-          {/* 心情强度选择 */}
-          <View style={styles.intensitySection}>
-            <Text style={styles.sectionTitle}>心情强度</Text>
-            <MoodIntensitySlider
-              value={intensity}
-              onValueChange={handleIntensityChange}
-              min={1}
-              max={10}
-              width={280}
-              height={12}
-            />
-          </View>
+            {/* 心情选择 */}
+            <View style={styles.moodSection}>
+              <Text style={styles.sectionTitle}>选择心情</Text>
+              <View style={styles.moodOptions}>
+                {moodOptions.map((mood, index) => (
+                  <TouchableOpacity
+                    key={index}
+                    style={[
+                      styles.moodOption,
+                      selectedMood === mood.type && styles.selectedMoodOption
+                    ]}
+                    onPress={() => setSelectedMood(mood.type)}
+                  >
+                    <Image source={mood.image} style={styles.moodImage} />
+                    <Text style={styles.moodLabel}>{mood.label}</Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            </View>
+
+            {/* 心情强度选择 */}
+            <View style={styles.intensitySection}>
+              <Text style={styles.sectionTitle}>心情强度</Text>
+              <MoodIntensitySlider
+                value={intensity}
+                onValueChange={handleIntensityChange}
+                min={1}
+                max={10}
+                width={280}
+                height={12}
+              />
+            </View>
 
 
-          {/* 心情描述 */}
+            {/* 心情描述 */}
 
-          <View style={styles.descriptionSection}>
-            <Text style={styles.sectionTitle}>心情日记</Text>
-            <Text style={styles.diarySubtitle}>记录你的心情，珍藏美好回忆</Text>
-            <TextInput
-              ref={textInputRef}
-              style={styles.descriptionInput}
-              placeholder={`今天的心情如何？
+            <View style={styles.descriptionSection}>
+              <Text style={styles.sectionTitle}>心情日记</Text>
+              <Text style={styles.diarySubtitle}>记录你的心情，珍藏美好回忆</Text>
+              <TextInput
+                ref={textInputRef}
+                style={styles.descriptionInput}
+                placeholder={`今天的心情如何？
 
 你经历过什么特别的事情吗？
 有什么让你开心的事？
 或者，有什么让你感到困扰？
 
 写下你的感受，让这些时刻成为你珍贵的记忆...`}
-              placeholderTextColor="#a8a8a8"
-              value={description}
-              onChangeText={setDescription}
-              multiline
-              maxLength={1000}
-              textAlignVertical="top"
-              onFocus={() => {
-                // 当文本输入框获得焦点时，滚动到输入框
-                setTimeout(() => {
-                  scrollViewRef.current?.scrollToEnd({ animated: true });
-                }, 300);
-              }}
-            />
-            <Text style={styles.characterCount}>{description.length}/1000</Text>
-          </View>
+                placeholderTextColor="#a8a8a8"
+                value={description}
+                onChangeText={setDescription}
+                multiline
+                maxLength={1000}
+                textAlignVertical="top"
+                onFocus={() => {
+                  // 当文本输入框获得焦点时，滚动到输入框
+                  setTimeout(() => {
+                    scrollViewRef.current?.scrollToEnd({ animated: true });
+                  }, 300);
+                }}
+              />
+              <Text style={styles.characterCount}>{description.length}/1000</Text>
+            </View>
 
           </ScrollView>
         </KeyboardAvoidingView>
@@ -299,7 +303,7 @@ export default function MoodEditScreen() {
             )}
           </View>
         </View>
-      </SafeAreaView>
+      </View>
     </View>
   );
 }