richarjiang
4f2bd76b8f
- 在目标列表中添加左滑删除功能，用户可通过左滑手势显示删除按钮并确认删除目标 - 修改 GoalCard 组件，使用 Swipeable 组件包装卡片内容，支持删除操作 - 更新目标列表页面，集成删除目标的逻辑，确保与 Redux 状态管理一致 - 添加开发模式下的模拟数据，方便测试删除功能 - 更新相关文档，详细描述左滑删除功能的实现和使用方法
132 lines
3.1 KiB
Markdown
132 lines
3.1 KiB
Markdown
# 目标列表左滑删除功能实现
|
|
|
|
## 功能概述
|
|
|
|
为目标列表的卡片添加了左滑删除功能，用户可以通过左滑手势显示删除按钮，点击后确认删除目标。
|
|
|
|
## 技术实现
|
|
|
|
### 1. 依赖库
|
|
- `react-native-gesture-handler`: 提供手势处理功能
|
|
- `@expo/vector-icons`: 提供删除图标
|
|
|
|
### 2. 核心组件修改
|
|
|
|
#### GoalCard 组件 (`components/GoalCard.tsx`)
|
|
- 使用 `Swipeable` 组件包装原有的卡片内容
|
|
- 添加 `renderRightActions` 方法渲染删除按钮
|
|
- 添加删除确认对话框
|
|
- 支持删除回调函数
|
|
|
|
#### 应用根布局 (`app/_layout.tsx`)
|
|
- 添加 `GestureHandlerRootView` 包装器
|
|
- 确保手势处理功能正常工作
|
|
|
|
#### 目标列表页面 (`app/goals-list.tsx`)
|
|
- 添加删除目标的处理逻辑
|
|
- 集成 Redux 删除 action
|
|
- 添加开发模式下的模拟数据用于测试
|
|
|
|
### 3. 功能特性
|
|
|
|
#### 左滑手势
|
|
- 支持左滑显示删除按钮
|
|
- 设置合适的滑动阈值和边界
|
|
- 自动关闭滑动状态
|
|
|
|
#### 删除确认
|
|
- 显示确认对话框
|
|
- 包含目标标题信息
|
|
- 提供取消和确认选项
|
|
|
|
#### 视觉反馈
|
|
- 红色删除按钮背景
|
|
- 删除图标和文字
|
|
- 圆角设计保持一致性
|
|
|
|
#### 状态管理
|
|
- 集成 Redux 删除 action
|
|
- 自动更新列表状态
|
|
- 错误处理和提示
|
|
|
|
## 使用方法
|
|
|
|
### 用户操作流程
|
|
1. 在目标列表中，向左滑动任意目标卡片
|
|
2. 删除按钮会从右侧滑出
|
|
3. 点击删除按钮
|
|
4. 确认删除对话框出现
|
|
5. 选择"删除"确认或"取消"放弃
|
|
|
|
### 开发测试
|
|
在开发模式下，如果 API 调用失败，会自动加载模拟数据进行测试：
|
|
- 每日运动30分钟
|
|
- 每天喝8杯水
|
|
- 每周读书2小时
|
|
|
|
## 代码结构
|
|
|
|
```typescript
|
|
// GoalCard 组件结构
|
|
<Swipeable
|
|
ref={swipeableRef}
|
|
renderRightActions={renderRightActions}
|
|
rightThreshold={40}
|
|
overshootRight={false}
|
|
>
|
|
<TouchableOpacity>
|
|
{/* 原有的卡片内容 */}
|
|
</TouchableOpacity>
|
|
</Swipeable>
|
|
```
|
|
|
|
## 样式设计
|
|
|
|
### 删除按钮样式
|
|
```typescript
|
|
deleteButton: {
|
|
backgroundColor: '#EF4444',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
width: 80,
|
|
height: '100%',
|
|
borderTopRightRadius: 16,
|
|
borderBottomRightRadius: 16,
|
|
marginBottom: 12,
|
|
}
|
|
```
|
|
|
|
### 删除按钮文字样式
|
|
```typescript
|
|
deleteButtonText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
marginTop: 4,
|
|
}
|
|
```
|
|
|
|
## 注意事项
|
|
|
|
1. **手势处理**: 必须使用 `GestureHandlerRootView` 包装应用
|
|
2. **类型安全**: 确保所有必要的字段都正确设置
|
|
3. **错误处理**: 删除失败时显示错误提示
|
|
4. **用户体验**: 提供确认对话框防止误删
|
|
5. **性能优化**: 使用 `useRef` 管理 Swipeable 引用
|
|
|
|
## 扩展功能
|
|
|
|
可以考虑添加的其他功能：
|
|
- 批量删除
|
|
- 撤销删除
|
|
- 删除动画效果
|
|
- 更多操作按钮（编辑、暂停等）
|
|
|
|
## 测试建议
|
|
|
|
1. **手势测试**: 测试不同滑动距离和速度
|
|
2. **边界测试**: 测试快速连续滑动
|
|
3. **状态测试**: 测试删除后的列表更新
|
|
4. **错误测试**: 测试网络错误时的处理
|
|
5. **UI测试**: 测试不同屏幕尺寸下的显示效果
|