feat: 添加后台任务测试通知功能,优化滑动删除交互体验
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user