feat: 适配 headerbar ios26

components/ui/FloatingSelectionCard.tsx

@@ -32,10 +32,10 @@ export function FloatingSelectionCard({
   ];
   const closeWrapperProps = glassAvailable
     ? {
-        glassEffectStyle: 'regular' as const,
-        tintColor: 'rgba(255,255,255,0.45)',
-        isInteractive: true,
-      }
+      glassEffectStyle: 'regular' as const,
+      tintColor: 'rgba(255,255,255,0.45)',
+      isInteractive: true,
+    }
     : {};
 
   return (
@@ -136,9 +136,6 @@ const styles = StyleSheet.create({
     elevation: 3,
   },
   closeButtonInnerGlass: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: 'rgba(255,255,255,0.45)',
-    backgroundColor: 'rgba(255,255,255,0.35)',
   },
   closeButtonInnerFallback: {
     backgroundColor: 'rgba(255, 255, 255, 0.9)',

components/ui/HeaderBar.tsx

@@ -1,6 +1,7 @@
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { Ionicons } from '@expo/vector-icons';
+import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import { router } from 'expo-router';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
@@ -58,12 +59,14 @@ export function HeaderBar({
     };
   };
 
+  const defaultBackColor = 'rgba(0,0,0,0.8)'
+
   return (
     <View
       style={[
         styles.header,
         {
-          paddingTop: (withSafeTop ? insets.top : 0) + 8,
+          paddingTop: insets.top,
           backgroundColor: getBackgroundColor(),
           ...getBorderStyle(),
           ...(variant === 'elevated' && {
@@ -76,24 +79,51 @@ export function HeaderBar({
         },
       ]}
     >
-      <TouchableOpacity
-        accessibilityRole="button"
-        onPress={() => {
-          if (onBack) {
-            onBack();
-            return
-          }
-          router.back()
-        }}
-        style={styles.backButton}
-        activeOpacity={0.7}
-      >
-        <Ionicons
-          name="chevron-back"
-          size={24}
-          color={backColor || theme.text}
-        />
-      </TouchableOpacity>
+      {isLiquidGlassAvailable() ? (
+        <TouchableOpacity
+          accessibilityRole="button"
+          onPress={() => {
+            if (onBack) {
+              onBack();
+              return
+            }
+            router.back()
+          }}
+          activeOpacity={0.7}
+        >
+          <GlassView
+            style={styles.backButton}
+            glassEffectStyle="clear"
+            tintColor="rgba(255, 255, 255, 0.2)"
+            isInteractive={true}
+          >
+            <Ionicons
+              name="chevron-back"
+              size={24}
+              color={backColor || defaultBackColor}
+            />
+          </GlassView>
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          accessibilityRole="button"
+          onPress={() => {
+            if (onBack) {
+              onBack();
+              return
+            }
+            router.back()
+          }}
+          style={[styles.backButton, styles.fallbackBackground]}
+          activeOpacity={0.7}
+        >
+          <Ionicons
+            name="chevron-back"
+            size={24}
+            color={backColor || defaultBackColor}
+          />
+        </TouchableOpacity>
+      )}
       <View style={styles.titleContainer}>
         {typeof title === 'string' ? (
           <Text style={[
@@ -117,6 +147,11 @@ export function HeaderBar({
 
 const styles = StyleSheet.create({
   header: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    zIndex: 2,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -126,10 +161,15 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   backButton: {
-    width: 32,
-    height: 32,
+    width: 38,
+    height: 38,
     alignItems: 'center',
     justifyContent: 'center',
+    borderRadius: 38,
+    overflow: 'hidden',
+  },
+  fallbackBackground: {
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
   },
   titleContainer: {
     flex: 1,