digital-pilates/.kilocode/rules/memory-bank/tasks.md

常见任务和模式

HeaderBar 顶部距离处理

最后更新: 2025-10-16

问题描述

当使用 HeaderBar 组件时，需要正确处理内容区域的顶部距离，确保内容不会被状态栏或刘海屏遮挡。

解决方案

使用 useSafeAreaTop hook 获取安全区域顶部距离，并应用到内容容器的样式中。

实现模式

1. 导入必要的 hook

import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';

2. 在组件中获取 safeAreaTop

const safeAreaTop = useSafeAreaTop()

3. 应用到内容容器

// 方式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，不需要添加额外的固定像素值

示例代码

// ❌ 错误写法 - 在 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