我完全懂你想要的那种原生iOS返回按钮的质感——带Chevron箭头图标，按压时还有液态玻璃的波纹效果，之前在跨栈导航场景下我也踩过不少坑，现在给你几个精准解决的方案：

方案一：用官方原生返回按钮组件（最推荐） #

Expo Router依赖的@react-navigation/elements库提供了HeaderBackButton组件，这就是iOS原生返回按钮的封装，自带Chevron图标和液态玻璃按压效果，完全符合你的需求。

修改你的app/(routes)/layout.tsx代码： #

import { Stack, useRouter } from "expo-router";
import { backgrounds, labels } from "@/theme";
// 导入官方原生返回按钮组件
import { HeaderBackButton } from "@react-navigation/elements";

export default function RoutesLayout() {
  const router = useRouter(); // 用于跨栈导航时手动触发返回操作

  return (
    <Stack
      screenOptions={{
        headerShown: true,
        headerShadowVisible: false,
        headerStyle: {
          backgroundColor: backgrounds.primary.hex,
        },
        contentStyle: { backgroundColor: backgrounds.primary.hex },
        headerBackTitle: "",
        headerTintColor: "#007AFF",
        headerTitleStyle: {
          color: labels.primary.hex,
        },
        presentation: "card",
        // 替换自定义headerLeft为原生返回按钮
        headerLeft: () => (
          <HeaderBackButton
            onPress={() => router.back()}
            tintColor="#007AFF" // 和导航栏tintColor保持一致
            labelVisible={false} // 隐藏默认返回文字
          />
        )
      }}
      >
      <Stack.Screen
        name="language"
        options={{
          title: "Language",
        }}
      />
    </Stack>
  );
}

为什么这能解决问题？ #

• HeaderBackButton在iOS上直接封装了原生UIButton，自带液态玻璃波纹按压效果
• 内置标准Chevron箭头图标，和苹果设置APP的返回按钮样式完全一致
• router.back()完美适配跨栈导航场景，Expo Router会自动管理路由栈逻辑

方案二：自定义图标+原生按钮组件 #

如果你想替换默认的Chevron图标风格，可以给HeaderBackButton传递backImage属性，配合@expo/vector-icons实现个性化图标：

import { Stack, useRouter } from "expo-router";
import { backgrounds, labels } from "@/theme";
import { HeaderBackButton } from "@react-navigation/elements";
import Ionicons from '@expo/vector-icons/Ionicons'; // 需确保已安装expo-font

export default function RoutesLayout() {
  const router = useRouter();

  return (
    <Stack
      screenOptions={{
        // ... 保留原有配置
        headerLeft: () => (
          <HeaderBackButton
            onPress={() => router.back()}
            tintColor="#007AFF"
            labelVisible={false}
            // 自定义返回图标
            backImage={() => (
              <Ionicons 
                name="ios-arrow-back" 
                size={24} 
                color="#007AFF" 
                style={{ marginLeft: 8 }} // 微调位置和原生对齐
              />
            )}
          />
        )
      }}
      >
      {/* ... 保留原有Screen配置 */}
    </Stack>
  );
}

方案三：原生Button组件+Unicode图标（极简临时方案） #

如果不想引入额外组件，也可以用React Native原生的Button组件，配合Unicode箭头符号模拟返回图标，它在iOS上也是原生UIButton，同样有液态玻璃效果：

// 仅修改headerLeft部分
headerLeft: () => (
  <Button 
    title="←" 
    onPress={() => router.back()}
    color="#007AFF"
  />
)

不过这个方案的图标样式和原生Chevron有细微差别，仅作临时替代使用。

额外注意事项 #

1. 跨栈导航场景下，router.back()可以正确触发返回逻辑，Expo Router会自动管理路由栈
2. 保持headerTintColor和返回按钮的tintColor一致，确保图标颜色和导航栏其他元素统一
3. 你的presentation: "card"设置正确，和iOS原生的卡片式过渡动画完美匹配

这样修改后，你就能得到和苹果设置APP完全一致的返回按钮效果了！