digital-pilates/components/model/food

食物库页面实现说明

概述

已成功将食物库从弹窗模式改造为页面模式，解决了React Native中Modal嵌套的问题。

实现内容

1. 创建食物库页面

• 文件位置: app/food-library.tsx
• 功能: 完整的食物库界面，包含搜索、分类导航、食物列表等功能
• 特点:
  • 支持URL参数传递餐次类型 (mealType)
  • 使用Expo Router进行页面导航
  • 在页面中可以正常使用FoodDetailModal弹窗

2. 修改营养卡片组件

• 文件: components/NutritionRadarCard.tsx
• 修改内容:
  • 移除了FoodLibraryModal的导入和使用
  • 将加号按钮的点击事件改为页面导航
  • 使用 router.push('/food-library?mealType=${currentMealType}') 进行导航

3. 更新路由配置

• 文件: constants/Routes.ts
• 新增: FOOD_LIBRARY: '/food-library' 路由常量

4. 清理旧文件

• 删除了 components/model/food/FoodLibraryModal.tsx
• 更新了 components/model/food/index.ts 导出文件

使用方式

1. 在statistics页面的营养卡片中点击右上角的加号按钮
2. 会导航到食物库页面 (/food-library)
3. 在食物库页面中点击食物项的加号按钮
4. 会弹出食物详情弹窗 (FoodDetailModal)
5. 在详情弹窗中可以选择单位和数量，点击保存后返回statistics页面

技术优势

1. 解决Modal嵌套问题: 避免了React Native中Modal嵌套的兼容性问题
2. 更好的用户体验: 页面导航比弹窗更符合移动端的交互习惯
3. 键盘适配: FoodDetailModal中的键盘适配功能可以正常工作
4. 代码结构清晰: 页面和弹窗职责分离，代码更易维护

页面功能

食物库页面功能

• ✅ 搜索食物
• ✅ 分类导航（常见、自定义、收藏等）
• ✅ 食物列表展示
• ✅ 餐次显示
• ✅ 返回导航

食物详情弹窗功能

• ✅ 食物信息展示
• ✅ 营养成分显示
• ✅ 单位选择（克、小份、中份、大份）
• ✅ 数量输入
• ✅ 键盘适配
• ✅ 保存功能

注意事项

1. 食物库页面使用URL参数传递餐次类型，确保从不同餐次点击加号时能正确显示对应的餐次
2. FoodDetailModal仍然是弹窗形式，但现在是在页面中使用，避免了嵌套问题
3. 所有原有的UI样式和交互逻辑都得到了保留