Squash merge feat/expo-app: app-expo, .cursor, workflows, package.json, .husky; remove app-android, app-ios, react-app
This commit is contained in:
30
.cursor/rules/Expo-ui.mdc
Normal file
30
.cursor/rules/Expo-ui.mdc
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
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>;
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user