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