---
description: Expo UI 与 reusables CLI 规范
globs: app-expo/src/**/*.{ts,tsx}
alwaysApply: false
---

# Expo UI

- `app-expo` 页面开发默认假设存在刘海、状态栏、Home Indicator 和底部 Tab，不要把内容直接顶到屏幕边缘。
- 根布局保持单一 `SafeAreaProvider`，放在 `app-expo/src/app/_layout.tsx` 一类的顶层布局中；不要在普通页面里重复包 provider。
- 普通静态页面优先使用 `SafeAreaView` 作为页面内容外层容器。
- 只有在需要精细控制顶部、底部、左右边距时，才使用 `useSafeAreaInsets()` 手动计算 `padding` 或 `contentInset`。
- 带 `ScrollView`、底部固定操作栏、自定义 header、沉浸式背景的页面，必须显式处理 `top` 和 `bottom` inset。
- 页面如果已经有底部 Tab，还要把 tab 占位和 `bottom` inset 一起考虑，避免按钮或正文被遮挡。
- `react-native-reusables` 组件优先使用 CLI 添加，不要手抄文档代码。默认命令：`npx @react-native-reusables/cli@latest add <component>`。
- 组件生成路径与别名以 `app-expo/components.json` 为准，UI 组件默认放在 `@/components/ui`，不要随意改散。
- Web 可以按布局需要弱化 safe area 处理，但 iOS/Android 页面不能省略。
- 禁止使用废弃 API：`useSafeArea`、`SafeAreaConsumer`、`SafeAreaContext`、`initialWindowSafeAreaInsets`。

```tsx
// ❌ BAD
export default function Page() {
  return <View style={{ flex: 1 }} />;
}

// ✅ GOOD
export default function Page() {
  return <SafeAreaView style={{ flex: 1 }}>{/* content */}</SafeAreaView>;
}
```