From 937e8112f4c56d05a7163a5ec107c433792168e2 Mon Sep 17 00:00:00 2001
From: lafay <2021211506@stu.hit.edu.cn>
Date: Wed, 18 Mar 2026 14:21:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AE=89=E5=8D=93?=
 =?UTF-8?q?=E7=AB=AF=E5=B8=96=E5=AD=90=E5=8D=A1=E7=89=87=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=86=B2=E7=AA=81=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为嵌套TouchableOpacity添加stopPropagation防止事件冒泡
- 修复grid模式下图片和用户头像点击事件
- 修复列表模式下所有交互按钮点击事件
- 优化手势配置添加shouldCancelWhenOutside
---
 src/components/business/PostCard.tsx | 70 +++++++++++++++++++++++-----
 src/screens/home/HomeScreen.tsx      |  1 +
 2 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/src/components/business/PostCard.tsx b/src/components/business/PostCard.tsx
index c992e42..fb5fabd 100644
--- a/src/components/business/PostCard.tsx
+++ b/src/components/business/PostCard.tsx
@@ -362,6 +362,20 @@ const PostCard: React.FC<PostCardProps> = ({
     const gridUsernameFontSize = isDesktop ? 14 : 12;
     const gridLikeFontSize = isDesktop ? 14 : 12;
 
+    const handleContainerPress = () => {
+      onPress();
+    };
+
+    const handleImagePress = (e: any) => {
+      e.stopPropagation();
+      onImagePress?.(post.images || [], 0);
+    };
+
+    const handleUserPress = (e: any) => {
+      e.stopPropagation();
+      onUserPress();
+    };
+
     return (
       <TouchableOpacity 
         style={[
@@ -369,14 +383,14 @@ const PostCard: React.FC<PostCardProps> = ({
           !hasImage && styles.gridContainerNoImage,
           isDesktop && styles.gridContainerDesktop
         ]} 
-        onPress={onPress} 
+        onPress={handleContainerPress} 
         activeOpacity={0.9}
       >
         {/* 封面图 - 只有有图片时才渲染，无图时不显示占位区域 */}
         {hasImage && (
           <TouchableOpacity
             activeOpacity={0.8}
-            onPress={() => onImagePress?.(post.images || [], 0)}
+            onPress={handleImagePress}
           >
             <SmartImage
               source={{ uri: coverUrl }}
@@ -424,7 +438,7 @@ const PostCard: React.FC<PostCardProps> = ({
 
         {/* 底部信息 */}
         <View style={[styles.gridFooter, isDesktop && styles.gridFooterDesktop]}>
-          <TouchableOpacity style={styles.gridUserInfo} onPress={onUserPress}>
+          <TouchableOpacity style={styles.gridUserInfo} onPress={handleUserPress}>
             <Avatar
               source={author.avatar}
               size={isDesktop ? 24 : 20}
@@ -462,6 +476,40 @@ const PostCard: React.FC<PostCardProps> = ({
     return 3;
   }, [isWideScreen, isDesktop, isTablet]);
 
+  const handleContainerPress = () => {
+    onPress();
+  };
+
+  const handleUserPress = (e: any) => {
+    e.stopPropagation();
+    onUserPress();
+  };
+
+  const handleLikePress = (e: any) => {
+    e.stopPropagation();
+    onLike();
+  };
+
+  const handleCommentPress = (e: any) => {
+    e.stopPropagation();
+    onComment();
+  };
+
+  const handleSharePress = (e: any) => {
+    e.stopPropagation();
+    onShare();
+  };
+
+  const handleBookmarkPress = (e: any) => {
+    e.stopPropagation();
+    onBookmark();
+  };
+
+  const handleDeletePress = (e: any) => {
+    e.stopPropagation();
+    handleDelete();
+  };
+
   return (
     <TouchableOpacity
       style={[
@@ -481,12 +529,12 @@ const PostCard: React.FC<PostCardProps> = ({
           } : {})
         }
       ]}
-      onPress={onPress}
+      onPress={handleContainerPress}
       activeOpacity={0.9}
     >
       {/* 用户信息 */}
       <View style={styles.userSection}>
-        <TouchableOpacity onPress={onUserPress}>
+        <TouchableOpacity onPress={handleUserPress}>
           <Avatar
             source={author.avatar}
             size={avatarSize}
@@ -495,7 +543,7 @@ const PostCard: React.FC<PostCardProps> = ({
         </TouchableOpacity>
         <View style={styles.userInfo}>
           <View style={styles.userNameRow}>
-            <TouchableOpacity onPress={onUserPress}>
+            <TouchableOpacity onPress={handleUserPress}>
               <Text 
                 variant="body" 
                 style={[
@@ -529,7 +577,7 @@ const PostCard: React.FC<PostCardProps> = ({
         {isPostAuthor && onDelete && (
           <TouchableOpacity
             style={styles.deleteButton}
-            onPress={handleDelete}
+            onPress={handleDeletePress}
             disabled={isDeleting}
           >
             <MaterialCommunityIcons
@@ -605,7 +653,7 @@ const PostCard: React.FC<PostCardProps> = ({
         </View>
         
         <View style={styles.actionButtons}>
-          <TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={onLike}>
+          <TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={handleLikePress}>
             <MaterialCommunityIcons
               name={post.is_liked ? 'heart' : 'heart-outline'}
               size={isDesktop ? 22 : 19}
@@ -620,7 +668,7 @@ const PostCard: React.FC<PostCardProps> = ({
             </Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={onComment}>
+          <TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={handleCommentPress}>
             <MaterialCommunityIcons
               name="comment-outline"
               size={isDesktop ? 22 : 19}
@@ -631,7 +679,7 @@ const PostCard: React.FC<PostCardProps> = ({
             </Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={onShare}>
+          <TouchableOpacity style={[styles.actionButton, ...(isDesktop ? [styles.actionButtonWide] : [])]} onPress={handleSharePress}>
             <MaterialCommunityIcons
               name="share-outline"
               size={isDesktop ? 22 : 19}
@@ -639,7 +687,7 @@ const PostCard: React.FC<PostCardProps> = ({
             />
           </TouchableOpacity>
 
-          <TouchableOpacity style={[styles.actionButton, isDesktop && styles.actionButtonWide]} onPress={onBookmark}>
+          <TouchableOpacity style={[styles.actionButton, isDesktop && styles.actionButtonWide]} onPress={handleBookmarkPress}>
             <MaterialCommunityIcons
               name={post.is_favorited ? 'bookmark' : 'bookmark-outline'}
               size={isDesktop ? 22 : 19}
diff --git a/src/screens/home/HomeScreen.tsx b/src/screens/home/HomeScreen.tsx
index cfff548..cd5b1b5 100644
--- a/src/screens/home/HomeScreen.tsx
+++ b/src/screens/home/HomeScreen.tsx
@@ -320,6 +320,7 @@ export const HomeScreen: React.FC = () => {
       .runOnJS(true)
       .activeOffsetX([-15, 15])
       .failOffsetY([-20, 20])
+      .shouldCancelWhenOutside(true)
       .onEnd((event) => {
         const now = Date.now();
         if (now - lastSwipeAtRef.current < SWIPE_COOLDOWN_MS) {