e4ddd21305
- 新增历史记录页面，支持查看、筛选和分页加载营养成分分析记录 - 在分析页面添加历史记录入口，使用Liquid Glass效果 - 优化分析结果展示样式，采用卡片式布局和渐变效果 - 移除流式分析相关代码，简化分析流程 - 添加历史记录API接口和类型定义
64 lines
1.7 KiB
Markdown
64 lines
1.7 KiB
Markdown
# 常见任务和模式
|
|
|
|
## HeaderBar 顶部距离处理
|
|
|
|
**最后更新**: 2025-10-16
|
|
|
|
### 问题描述
|
|
当使用 HeaderBar 组件时，需要正确处理内容区域的顶部距离，确保内容不会被状态栏或刘海屏遮挡。
|
|
|
|
### 解决方案
|
|
使用 `useSafeAreaTop` hook 获取安全区域顶部距离，并应用到内容容器的样式中。
|
|
|
|
### 实现模式
|
|
|
|
#### 1. 导入必要的 hook
|
|
```typescript
|
|
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
|
```
|
|
|
|
#### 2. 在组件中获取 safeAreaTop
|
|
```typescript
|
|
const safeAreaTop = useSafeAreaTop()
|
|
```
|
|
|
|
#### 3. 应用到内容容器
|
|
```typescript
|
|
// 方式1: 直接应用到 View 组件
|
|
<View style={[styles.filterContainer, { paddingTop: safeAreaTop }]}>
|
|
|
|
// 方式2: 应用到 ScrollView 的 contentContainerStyle
|
|
<ScrollView
|
|
contentContainerStyle={{ paddingTop: safeAreaTop }}
|
|
>
|
|
|
|
// 方式3: 应用到 SectionList 的 style
|
|
<SectionList
|
|
style={{ paddingTop: safeAreaTop }}
|
|
>
|
|
```
|
|
|
|
### 重要注意事项
|
|
1. **不要在 StyleSheet 中使用变量**：不能在 `StyleSheet.create()` 中直接使用 `safeAreaTop` 变量
|
|
2. **使用动态样式**：必须通过内联样式或数组样式的方式动态应用 `safeAreaTop`
|
|
3. **不需要额外偏移**：通常只需要 `safeAreaTop`，不需要添加额外的固定像素值
|
|
|
|
### 示例代码
|
|
```typescript
|
|
// ❌ 错误写法 - 在 StyleSheet 中使用变量
|
|
const styles = StyleSheet.create({
|
|
filterContainer: {
|
|
paddingTop: safeAreaTop, // 这会导致错误
|
|
},
|
|
});
|
|
|
|
// ✅ 正确写法 - 使用动态样式
|
|
<View style={[styles.filterContainer, { paddingTop: safeAreaTop }]}>
|
|
```
|
|
|
|
### 参考页面
|
|
- `app/steps/detail.tsx`
|
|
- `app/water/detail.tsx`
|
|
- `app/profile/goals.tsx`
|
|
- `app/workout/history.tsx`
|
|
- `app/challenges/[id]/leaderboard.tsx` |