feat: 添加后台任务测试通知功能,优化滑动删除交互体验

This commit is contained in:
richarjiang
2025-09-04 16:12:27 +08:00
parent 05a643a9e6
commit a4a0e07227
3 changed files with 44 additions and 20 deletions

View File

@@ -5,7 +5,7 @@ import { Ionicons } from '@expo/vector-icons';
import dayjs from 'dayjs';
import React, { useMemo, useRef, useState } from 'react';
import { Alert, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';
import { RectButton, Swipeable } from 'react-native-gesture-handler';
export type NutritionRecordCardProps = {
record: DietRecord;
@@ -53,6 +53,9 @@ export function NutritionRecordCard({
// 左滑删除相关
const swipeableRef = useRef<Swipeable>(null);
// 添加滑动状态管理,防止滑动时触发点击事件
const [isSwiping, setIsSwiping] = useState(false);
// 营养数据统计
const nutritionStats = useMemo(() => {
return [
@@ -80,6 +83,26 @@ export function NutritionRecordCard({
const mealTypeColor = MEAL_TYPE_COLORS[record.mealType];
const mealTypeLabel = MEAL_TYPE_LABELS[record.mealType];
// 处理点击事件,只有在非滑动状态下才触发
const handlePress = () => {
if (!isSwiping && onPress) {
onPress();
}
};
// 处理滑动开始
const handleSwipeableWillOpen = () => {
setIsSwiping(true);
};
// 处理滑动结束
const handleSwipeableClose = () => {
// 延迟重置滑动状态,防止滑动结束时立即触发点击
setTimeout(() => {
setIsSwiping(false);
}, 100);
};
// 处理删除操作
const handleDelete = () => {
Alert.alert(
@@ -123,14 +146,16 @@ export function NutritionRecordCard({
renderRightActions={renderRightActions}
rightThreshold={40}
overshootRight={false}
onSwipeableWillOpen={handleSwipeableWillOpen}
onSwipeableClose={handleSwipeableClose}
>
<TouchableOpacity
<RectButton
style={[
styles.card,
{ backgroundColor: surfaceColor }
]}
onPress={onPress}
activeOpacity={0.7}
onPress={handlePress}
// activeOpacity={0.7}
>
{/* 主要内容区域 - 水平布局 */}
<View style={styles.mainContent}>
@@ -186,7 +211,7 @@ export function NutritionRecordCard({
</View>
</View>
</TouchableOpacity>
</RectButton>
</Swipeable>
</View>