31 lines
1.6 KiB
Plaintext
31 lines
1.6 KiB
Plaintext
---
|
||
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>;
|
||
}
|
||
```
|