68 lines
2.3 KiB
Markdown
68 lines
2.3 KiB
Markdown
# 食物库页面实现说明
|
||
|
||
## 概述
|
||
|
||
已成功将食物库从弹窗模式改造为页面模式，解决了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样式和交互逻辑都得到了保留 |